Angular2 从模块导入 components/services
Angular2 import components/services from module
我正在开发一个 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'.
知道为什么这不起作用吗?我的目标是在一个模块中定义某些 components/services,以便在我将创建的其他模块中重复使用。需要找出正确的方法来做到这一点...
感谢您的帮助!
不需要将服务添加到 NgModule 的 exports
。
provide
它们在您的 CoreModule 中或像现在一样在您的 AppModule 中,但是从它们的原始文件中导入它们...
或者添加一个 export {AuthService} from '..File..'
到您的核心模块。
您只能从 export
编辑的文件中 import
组件和服务。而不是它们在模块的 exports
部分中的位置。这是 Typescript 的东西,而不是 Angular 的东西! :)
我正在开发一个 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'.
知道为什么这不起作用吗?我的目标是在一个模块中定义某些 components/services,以便在我将创建的其他模块中重复使用。需要找出正确的方法来做到这一点...
感谢您的帮助!
不需要将服务添加到 NgModule 的 exports
。
provide
它们在您的 CoreModule 中或像现在一样在您的 AppModule 中,但是从它们的原始文件中导入它们...
或者添加一个 export {AuthService} from '..File..'
到您的核心模块。
您只能从 export
编辑的文件中 import
组件和服务。而不是它们在模块的 exports
部分中的位置。这是 Typescript 的东西,而不是 Angular 的东西! :)