Configuration

A routed Angular application has one singleton instance of the Router service. When the browser's URL changes, that router looks for a corresponding Route from which it can determine the component to display.

Pass array of routes to the RouterModule.forRoot method in the module imports to configure the router.

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'contacts', component: ContactsComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  ...
})
export class AppModule { }

forChild

Only call RouterModule.forRoot in the root module. In any other module, you must call the RouterModule.forChild method to register additional routes.

const blogRoutes: Routes = [
  { path: 'blog',  component: BlogComponent },
  { path: 'blog/post/:id', component: BlogPostComponent }
];
 
@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule,
  ]
})
export class BlogRoutingModule { }