Angular2从模块导入组件/服务

Posted 2023-02-18

【中文标题】Angular2从模块导入组件/服务

【英文标题】：Angular2 import components/services from module

【发布时间】：2017-01-29 23:45:38

【问题描述】：

我正在开发一个 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 

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

./src/view/app-module/app.module.ts (11,9) 中的错误：错误 TS2305： 模块 '"/Users/jamdahl/Web/Web-Scratch/Angular2-Express-Mongoose/src/view/core-module/core.module"' 没有导出的成员“UserService”。

错误 ./src/view/app-module/app.module.ts (11,22): 错误 TS2305: 模块 '"/Users/jamdahl/Web/Web-Scratch/Angular2-Express-Mongoose/src/view/core-module/core.module"' 没有导出的成员“AuthService”。

错误 ./src/view/app-module/app.module.ts (11,35): 错误 TS2305: 模块 '"/Users/jamdahl/Web/Web-Scratch/Angular2-Express-Mongoose/src/view/core-module/core.module"' 没有导出的成员“AuthComponent”。

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

感谢您的帮助！

【参考方案1】：

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

provide它们在您的 CoreModule 中或现在在您的 AppModule 中，但从它们的原始文件中导入它们...

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

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

【讨论】：

这很有用，但我很困惑。如果您必须手动导入所有组件/服务文件，使用模块有什么好处？

最重要的一点是将这些组件捆绑到模块中进行编译。而且您可以延迟加载模块..但是您仍然必须进行正确的导入才能使用它.. :) 这确实令人困惑，是的..

import xxx from 'yyy' 主要是 typescriptp/webpack 的东西。 Angular @ngModule 进行实际的功能构建。不幸的是，两者都需要玩得又好又轻松