Angular 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中删除RouterModule

 bootstrap: [AppComponent]

Answer 2

从RouterModule的{​​{1}}数组中删除AppModule：

bootstrap

我很好奇，为什么你首先将它添加到@NgModule({ declarations: [ AppComponent, ContactComponent ], imports: [ BrowserModule, FormsModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes) ], bootstrap: [ AppComponent <-- only AppComponent should be in boostrap array ] }) export class AppModule { } 数组？

Answer 3

虽然这是一个大错，你需要像这样使用。

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

您不得在Modules（引导程序数组）中添加任何Services，Directives，Pipes，bootstrap。

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