각도 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 제거 님의 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 호스트 웹 페이지를 만들고 삽입하는 루트 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 { } 

그 답에 대한