Angular2 import components/services from module

Question

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 1

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! :)