角4 RouterModule

Question

自分のアプリケーションにRouterModuleを追加しようとすると問題が発生します。 私のapp.module.tsファイルにルータシステムを追加した後。私は何度も何度もこのエラーを得た：

compiler.es5.js:1689 Uncaught Error: RouterModule cannot be used as an entry component.

をまたここに私のapp.module.tsコードです：

import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { NgModule } from '@angular/core'; 
import { RouterModule, Routes} from '@angular/router'; 

import { AppComponent } from './app.component'; 
import { ContactComponent } from './components/contact.component'; 

const appRoutes : Routes = [ 
    { path: 'test1', component : ContactComponent} 
] 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ContactComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule, 
    RouterModule.forRoot(appRoutes) 
    ], 

    providers: [], 
    bootstrap: [AppComponent, RouterModule] 
}) 
export class AppModule { } 

Answer 1

ブートストラップ

bootstrap: [AppComponent] 

Answer 2

からRouterModuleを削除AppModuleからRouterModuleを削除します's bootstrap配列：

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ContactComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    ReactiveFormsModule, 
    RouterModule.forRoot(appRoutes) 
    ], 
    bootstrap: [ 
    AppComponent <-- only AppComponent should be in boostrap array 
    ] 
}) 
export class AppModule { } 

私は興味があります、なぜあなたはbootstrap配列に最初に追加しましたか？

Answer 3

しかし、それは失敗しました、あなたはこのように使用する必要があります。

bootstrap: [AppComponent] // <== Remove RouterModule from here 

あなたはどのModules、Services、Directives、bootstrapでPipes（ブートストラップ配列）を追加してはなりません。

bootstrap - Angularが作成し、index.htmlホストWebページに挿入するルートAppComponent。

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent // Components, Services, Pipes 
    ], 
    imports: [ 
    BrowserModule // Modules 
    ], 
    providers: [], // Services 
    bootstrap: [AppComponent] // The root Component E.g. AppComponent 
}) 
export class AppModule { }