web-dev-qa-db-ja.com

Angular CLI-最新の使用時に@NgModule注釈を追加してください

注：私は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火災、私は今朝すべての最新のものを取得することにしました。

私はそれをすべて理解してレンガの壁にぶつかったので、これに関する助けは大衆的に感謝されます。

ありがとうございました。

angulartypescriptangular-cliangularjs-ng-model
39
MegaTron

問題は、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 }
]
34
PierreDuc