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!

score 9 · Accepted Answer · answered Sep 21 '16 at 16:10

9

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

answered Sep 21 '16 at 16:10

slaesh

16,659
6
50
52

4

This is very useful, but I am confused. What advantage is there in using modules do if you have to manually import all the component/service files anyway? – jrdnmdhl Sep 21 '16 at 16:45
3

The biggest point was to bundle those Components into modules for compilation. And you are able to lazy load modules.. but you still have to do the right import to use it.. :) it is relly confusing, yes.. – slaesh Sep 21 '16 at 16:48
`import {xxx} from 'yyy'` is mostly typescritp/webpack thing. Angular `@ngModule` does the actual functional building. Unfortunately, both are required to play nice and easy – Tomas Jun 05 '18 at 09:59

Angular2 import components/services from module

1 Answers1

Linked