How Nesting Routing Works in .Angular 6

• • Adding the base href in index
  • router-outlet in app component
  • and Routing module to main module

For Further info check official Docs

https://angular.io/guide/router
.

import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { RouterModule,Routes} from ‘@angular/router’;
import { HomeComponent} from ‘../layout/home/home.component’;
import { WatchComponent} from ‘../layout/watch/watch.component’;
import { AdminComponent} from ‘../layout/admin/admin.component’;
import { AdminDetailsComponent} from ‘../layout/admin/admin-details/admin-details.component’;
import { AdminListComponent } from ‘../layout/admin/admin-list/admin-list.component’;

const routes:Routes = [
{
path:”,
component: HomeComponent
},
{
path:’watch’,
component: WatchComponent,
children:[
{
path:”,
component: AdminDetailsComponent
}
]
},
{
path:’watch/admin’,
component: AdminComponent,
children:[
{
path:”,
component: AdminDetailsComponent
},
{
path:’list’,
component: AdminListComponent
},
]
}
]

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

Check the online edit link

https://stackblitz.com/edit/angular-navigationrouting?embed=1&file=src/app/routing/routing.module.ts