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服务"后加载并正常运行

问题

• 我决定创建一个新模块，然后将其导入到应用模块中
• 这是我在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.

谢谢.

推荐答案

问题是在您的ProjectsModule中导入了ProjectsListComponent.如果要在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屋！