Question

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

详情

我安装了最新版本的Angular CLI
默认应用加载并在'ng serve'

问题

我决定创建一个新模块，将其导入app模块
这是我在Angular 2中做过几次并且工作得很好的
但是，由于我今天早上运行了最新版本的Angular CLI，导入模块会中断并收到以下错误：

compiler.es5.js：1689 Uncaught Error：模块'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之间存在兼容性问题后，我决定获得最新版本。今天早上的一切。

我对这一切的任何帮助都会受到广泛的赞赏，因为我对这一切都有所了解。

谢谢。

Answer 1

问题是ProjectsListComponent中ProjectsModule的导入问题。如果要在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 }
]

Answer 2

在我的情况下，我在Parentcomponent中创建了一个新的ChildComponent，而在同一个模块中却创建了Parent，但在共享模块中注册了Parent，因此我使用CLI创建了ChildComponent，该CLI在当前模块中注册了Child，但我的父级却在共享模块中注册了

因此，请在共享模块中手动注册ChildComponent。

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

2 个答案: