Angular2 从模块导入组件/服务

Question

我正在开发一个 Angular2 最终应用程序，它(目前)有两个模块:

• CoreModule:包含共享组件、服务。
• 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 {}

核心模块:

/**
 * 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 {}

当我尝试运行它时，我得到以下信息:

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'.

知道为什么这不起作用吗？我的目标是在一个模块中定义某些组件/服务，以便在我将创建的其他模块中重复使用。需要找出正确的方法来做到这一点......

感谢您的帮助!

Answer 1

服务不需要添加到 NgModule 的exports。

在您的 CoreModule 中提供它们，或者像现在在您的 AppModule 中一样，但是从它们的原始文件中导入它们...

或者将 export {AuthService} from '..File..' 添加到您的 CoreModule。

您只能从exported 的文件中import 组件和服务。而不是它们在模块的 exports 部分中的位置。这是 Typescript 的东西，而不是 Angular 的东西! :)