Angular CLI - 请在使用最新版本时添加 @NgModule 注释 [英] Angular CLI - Please add a @NgModule annotation when using latest

问题描述

注意:我是 Angular 的新手，所以请原谅任何新手在这里的愚蠢行为.

note: I'm new to Angular, so please excuse any new comer stupidity here.

详情

• 我已经安装了最新版本的 Angular CLI
• ng serve"后默认应用加载并运行得非常好

问题

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

compiler.es5.js:1689 未捕获的错误:由模块ProjectsModule"导入的意外指令ProjectsListComponent".请添加@NgModule 注释.

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

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.

谢谢.

推荐答案

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

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.

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

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

这篇关于Angular CLI - 请在使用最新版本时添加 @NgModule 注释的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！