CODEWITHSUNDEEP
angular
M.J
M.J

Reputation: 286

Angular 4 RouterModule

I have some issue when i try to add RouterModule on my application. After i added router system on my app.module.ts file. i got this error again and again:

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

Also here is my app.module.ts code:

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

Upvotes: 1

Views: 427

Answers (3)

Sangwin Gawande
Sangwin Gawande

Reputation: 8166

Its a blunder though, You need to use like this.

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

You must not add any Modules, Services, Directives, Pipes in bootstrap (The bootstrap array).

bootstrap — The root AppComponent that Angular creates and inserts into the index.html host web page.

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

Upvotes: 0

Stefan Svrkota
Stefan Svrkota

Reputation: 50633

Remove RouterModule from AppModule's bootstrap array:

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

I'm curious, why did you add it to bootstrap array in the first place?

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222682

Remove RouterModule from bootstrap

 bootstrap: [AppComponent]

Upvotes: 2

Related Questions