问题
note: I'm new to Angular, so please excuse any new comer stupidity here.
Details
- I've installed the latest version of Angular CLI
- The default app loads and runs perfectly fine after 'ng serve'
Issue
- I decided to create a new module an import it into the app module
- This is something I've done a couple of times in Angular 2 and it's worked perfectly fine
- However, since I ran the latest version of Angular CLI this morning, importing a module breaks and I receive the following error:
compiler.es5.js:1689 Uncaught Error: Unexpected directive 'ProjectsListComponent' imported by the module 'ProjectsModule'. Please add a @NgModule annotation.
App Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { environment } from '../environments/environment';
import { ProjectsModule } from './projects/projects.module';
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
BrowserModule,
HttpModule,
ProjectsModule,
AngularFireModule.initializeApp(environment.firebase, 'AngularFireTestOne'), // imports firebase/app needed for everything
AngularFireDatabaseModule, // imports firebase/database, only needed for database features
AngularFireAuthModule // imports firebase/auth, only needed for auth features
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Projects Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ProjectsListComponent } from './projects-list.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
ProjectsListComponent
],
imports: [
BrowserModule,
ProjectsListComponent,
RouterModule.forChild([
{ path: 'projects', component: ProjectsListComponent }
])
]
})
export class ProjectsModule { }
The process I've taken to setting the module up hasn't been any different to when I was using Angular 2. However, after having issues with compatibility between Angular Cli, firebase and angular fire, I decided to get the latest of everything this morning.
Any help with this one would be massssssively appreciated as I've hit a brick wall with my understanding of it all.
Thank you.
回答1:
The problem is the import of ProjectsListComponent
in your ProjectsModule
. You should not import that, but add it to the export array, if you want to use it outside of your ProjectsModule
.
Other issues are your project routes. You should add these to an exportable variable, otherwise it's not AOT compatible. And you should -never- import the BrowserModule
anywhere else but in your AppModule
. Use the CommonModule
to get access to the *ngIf, *ngFor...etc
directives:
@NgModule({
declarations: [
ProjectsListComponent
],
imports: [
CommonModule,
RouterModule.forChild(ProjectRoutes)
],
exports: [
ProjectsListComponent
]
})
export class ProjectsModule {}
project.routes.ts
export const ProjectRoutes: Routes = [
{ path: 'projects', component: ProjectsListComponent }
]
来源:https://stackoverflow.com/questions/44777457/angular-cli-please-add-a-ngmodule-annotation-when-using-latest