AngularJS2 component not loading after adding router

Question

AngularJS2 app component is not loading after adding the router. There is no error in the log. if I remove the router it starts working again. Does anyone faced this kind of issue before. I am using 'lite-server' to run the application.

angular js version : "2.4.0",
router version : "~3.4.8",
lite-server version: "^2.2.2",

This is how I add router to my app.

step 1: added '<base href="/">' to index.html

step 2: added router links to my component.html

  <nav>
    <a routerLink="/new">Contacts</a> 
  </nav>
  <router-outlet></router-outlet>

step 3: my router.ts looks like below

export const routes: Routes = [
      { path: '', component: ContactListComponent },
      { path: '/new', component: NewContactComponent },
      { path: '/about', component: AboutComponent }
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]  
})
export class AppRoutingModule { }

step 4: added routing component to the module like below

@NgModule({
  declarations: [
    AppComponent,
    ContactListComponent,
    ContactComponent,
    NewContactComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [ContactService],
  bootstrap: [AppComponent]
})

Also tried to inject router like below

export class AppComponent {

   constructor(private routes: Router) { 

   }

}

So can anyone tell me what I am doing wrong?

mickdev · Accepted Answer · 2017-02-27 07:46:07Z

1

Try with no slash (/) :

export const routes: Routes = [
      { path: '', component: ContactListComponent },
      { path: 'new', component: NewContactComponent },
      { path: 'about', component: AboutComponent }
];

With slashes you'll probably get an error ("path cannot start with a slash...").

answered Feb 27, 2017 at 7:46

mickdev

2,88514 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

evan Over a year ago

excellent it worked, I was totally stuck. thanks for the reply

Collectives™ on Stack Overflow

AngularJS2 component not loading after adding router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related