jrdnmdhl jrdnmdhl - 2 months ago 96
TypeScript Question

Angular2 import components/services from module

I am working on an Angular2 final application which (currently) has two modules:


  • CoreModule: Contains shared components, services.

  • AppModule: The root module of the application



AppModule:

/**
* Created by jamdahl on 9/21/16.
*/

// Angular Imports
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {CoreModule} from '../core-module/core.module';
import {UserService, AuthService, AuthComponent} from '../core-module/core.module';

// Components
import {HomePageComponent} from './components/home-page.component';

//import {enableProdMode} from '@angular/core';
//enableProdMode();

@NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
ReactiveFormsModule,
CoreModule
],
declarations: [
AuthComponent,
HomePageComponent
],
providers: [
AuthService,
UserService
],
bootstrap: [
HomePageComponent
]
})
export class AppModule {}


CoreModule:

/**
* Created by jamdahl on 9/21/16.
*/

// Angular imports
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

// Class imports
import {User} from './classes/user.class';
import {Alert} from './classes/alert.class';

// Service imports
import {AuthService} from './services/auth.service';
import {UserService} from './services/user.service';

// Component imports
import {AuthComponent} from './components/auth.component';
import {SignInComponent} from './components/signin.component';
import {SignUpComponent} from './components/signup.component';

//import {enableProdMode} from '@angular/core';
//enableProdMode();

@NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
AuthComponent,
SignInComponent,
SignUpComponent
],
providers: [],
exports: [
User,
Alert,
AuthService,
UserService,
AuthComponent
]
})
export class CoreModule {}


When I try to run it, I get the following:


ERROR in ./src/view/app-module/app.module.ts (11,9): error TS2305:
Module
'"/Users/jamdahl/Web/Web-Scratch/Angular2-Express-Mongoose/src/view/core-module/core.module"'
has no exported member 'UserService'.

ERROR in
./src/view/app-module/app.module.ts (11,22): error TS2305: Module
'"/Users/jamdahl/Web/Web-Scratch/Angular2-Express-Mongoose/src/view/core-module/core.module"'
has no exported member 'AuthService'.

ERROR in
./src/view/app-module/app.module.ts (11,35): error TS2305: Module
'"/Users/jamdahl/Web/Web-Scratch/Angular2-Express-Mongoose/src/view/core-module/core.module"'
has no exported member 'AuthComponent'.


Any ideas why this is not working? My goal here is to define certain components/services in a module to be reused throughout other modules which I will create. Need to figure out the right way to do this...

Thank you for any help!

Answer

Services dont need to be added to the exports of a NgModule.

provide them inside of your CoreModule or like now inside of your AppModule, but import them from their original File...

Or add an export {AuthService} from '..File..' to your CoreModule.

You can only import Components and Services from a File where they are exported. And Not where they are in the exports section of a Module.. It's an Typescript thing and not an Angular thing! :)

Comments