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