Angular CLI - 使用最新版本时请添加@NgModule 注释

Question

注意:我是 Angular 的新手，所以请原谅新来者的愚蠢行为。

详情

• 我已经安装了最新版本的 Angular CLI
• 默认应用在“ng serve”后加载并运行良好

问题

• 我决定创建一个新模块并将其导入应用程序模块
• 这是我在 Angular 2 中做过几次的事情，而且效果非常好
• 但是，由于我今天早上运行了最新版本的 Angular CLI，因此导入模块中断并且我收到以下错误:

compiler.es5.js:1689 Uncaught Error: Unexpected directive 'ProjectsListComponent' imported by the module 'ProjectsModule'. Please add a @NgModule annotation.

应用模块

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

项目模块

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

我设置模块的过程与我使用 Angular 2 时没有任何不同。但是，在 Angular Cli、firebase 和 angular fire 之间出现兼容性问题后，我决定获取最新的今天早上的一切。

任何对此的帮助都将不胜感激，因为我对这一切的理解碰壁了。

谢谢。

Answer 1

问题是在 ProjectsModule 中导入 ProjectsListComponent。如果您想在 ProjectsModule 之外使用它，您不应该导入它，而是将它添加到导出数组。

其他问题是您的项目路线。您应该将这些添加到可导出变量中，否则它与 AOT 不兼容。而且你应该 - 永远不要 - 在你的 AppModule 之外的任何地方导入 BrowserModule。使用 CommonModule 访问 *ngIf, *ngFor...etc 指令:

@NgModule({
  declarations: [
     ProjectsListComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(ProjectRoutes)
  ],
  exports: [
     ProjectsListComponent
  ]
})

export class ProjectsModule {}

project.routes.ts

export const ProjectRoutes: Routes = [
      { path: 'projects', component: ProjectsListComponent }
]