Angular CLI - 最新のものを使用する場合は、@ NgModule注釈を追加してください。

Question

注：私はAngularを初めて使用していますので、ここで新しい方の愚かさを言い訳してください。私は角CLIの最新バージョン

デフォルトアプリの負荷を設置し、 'ngのサーブ' の後に完全に正常に動作しました

詳細

問題

• 私は新しいモジュールを作成してアプリケーションモジュールにインポートすることにしました
• これは私が角度2で何度かやったことです。これは完全にうまくいっています。
• しかし、私はAngular CLI今朝、モジュールの休憩をインポートすると、私は次のエラーが表示されます。

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

私はモジュールのセットアップを設定する撮影したプロセスは、私はしかし、角度2を使用していたときに何が違うのされていませんAngular Cli、firebase、angle fireの互換性に問題があったので、今朝はすべて最新のものを入手することにしました。

私はそれをすべて理解してレンガの壁にぶつかったので、この1つの助けは大いに評価されるでしょう。

ありがとうございます。

Answer 1

問題は、ProjectsModuleにProjectsListComponentのインポートです。インポートする必要はありませんが、ProjectsModuleの外で使用する場合は、エクスポート配列に追加してください。

その他の問題はプロジェクトルートです。これらをエクスポート可能な変数に追加する必要があります。そうでなければ、AOT互換ではありません。そして、をAppModule以外の場所にインポートする必要はありません。あなたがプロジェクトのモジュールを使用している理由

@NgModule({ 
    declarations: [ 
    ProjectsListComponent 
    ], 
    imports: [ 
    CommonModule, 
    RouterModule.forChild(ProjectRoutes) 
    ], 
    exports: [ 
    ProjectsListComponent 
    ] 
}) 

export class ProjectsModule {} 

project.routes.ts

export const ProjectRoutes: Routes = [ 
     { path: 'projects', component: ProjectsListComponent } 
]