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

【问题标题】：Angular CLI - Please add a @NgModule annotation when using latestAngular CLI - 请在使用最新版本时添加 @NgModule 注释
【发布时间】：2017-11-30 08:10:39
【问题描述】：

注意：我是 Angular 的新手，所以请原谅这里的任何新手愚蠢。

详情

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

问题

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

compiler.es5.js:1689 未捕获的错误：模块“ProjectsModule”导入的意外指令“ProjectsListComponent”。请添加@NgModule 注解。

应用模块

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 之间的兼容性问题后，我决定获取最新的今天早上的一切。

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

谢谢。

【问题讨论】：

为什么要使用项目模块？
嗨拉胡尔。我计划使用与项目相关的组件和与问题相关的组件来构建解决方案。我计划将它们分成“ProjectsModule”和“IssuesModule”。在这个初始测试中，我添加了我的“ProjectsModule”，却发现它不能像往常一样工作......
尝试在声明下将“ProjectsListComponent”导入您的应用模块

标签： angular typescript angular-cli angularjs-ng-model

【解决方案1】：

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

其他问题是您的项目路线。您应该将这些添加到可导出变量中，否则它与 AOT 不兼容。你应该 - 永远 - 将 BrowserModule 导入到您的 AppModule 之外的任何其他地方。使用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 }
]

【讨论】：

您好 Pierre，非常感谢您提供如此详细的回复。什么是“AOT 兼容”？（如果你不介意在这里回答）...（我可以在两分钟内接受答案:)）
AoT = 提前 (angular.io/guide/aot-compiler)。内联（不分解成可导出的部分）将阻止 Angular 执行 AoT - 这意味着您将错过 AoT 为@MegaTron 带来的巨大性能提升
在 Angular 8 中工作。

【解决方案2】：

在我的例子中，我在 Parentcomponent 中创建了一个新的 ChildComponent，而两者都在同一个模块中，但 Parent 注册在共享模块中，所以我使用 CLI 创建 ChildComponent，该 CLI 在当前模块中注册了 Child，但我的父级在共享模块中注册.

所以手动注册共享模块中的子组件。

【讨论】：