Angular 2 - Submodule routing and nested <router-outlet>

The html page will look like this.

Main Page

<top-navbar></top-navbar><router-outlet></router-outlet>

Sub Module Page

<sub-navbar></sub-navbar><router-outlet name='sub'></router-outlet>

on clicking navigation in top-nav bar the main route outlet will route respectively.

while clicking on sub-navbar the router-outlet [sub] will route respectively.

HTML is fine, the trick will came at writing app.routing

app.routing.ts

const appRoutes: Routes = [  {    path: 'login',    component: LoginComponent  },  { path: 'home',    component: homeComponent,    children: [      {        path: 'module1',        component: module1Component,        children: [          {            path: 'submodule11',            component: submodule11Component,          },          {            path: '',            redirectTo: 'submodule11',            pathMatch: 'full'          }        ]      },      {        path: 'module2',        component: module2omponent,        children: [          {            path: 'submodule21',            component: submodule21Component,          },          {            path: '',            redirectTo: 'submodule21',            pathMatch: 'full'          }        ]      }    ]  },  {    path: 'about',    component: aboutComponent  }]

Hope it will help you.

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

Use:

RouterModule.forChild()...<router-outlet name="sub"></router-outlet>...[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

Full example:

HTML

<div class="tabs tinyscroll">  <button *ngFor="let tab of tabs"  [routerLink]="[{ outlets: { sub: [tab.name] } }]"  routerLinkActive="selected">    <span>{{ tab.label }}</span>  </button></div><section>  <router-outlet name="sub"></router-outlet></section>

app.module.ts

imports: [...    RouterModule.forChild([      {        path: 'registers',        component: RegistersComponent,        children: [          {path: 'vehicles', component: VehiclesComponent, outlet: 'sub'},          {path: 'drivers', component: DriversComponent, outlet: 'sub'},          {path: 'bases', component: BasesComponent, outlet: 'sub'},          {path: 'lines', component: LinesComponent, outlet: 'sub'},          {path: 'users', component: UsersComponent, outlet: 'sub'},          {path: 'config', component: ConfigComponent, outlet: 'sub'},          {path: 'companies', component: CompaniesComponent, outlet: 'sub'}        ],        canActivate: [AuthGuard]      }    ]),...

you have to mention the outlet name in the routesmention your router outlet name in the routing like this "outlet:'sub"

routes: Routes = [  {path:'', redirectTo: 'login', pathMatch: 'full'},  {    path: 'login',    component: LoginComponent,  },  { path: 'home',    component: AppComponent,      children: [        {path: 'home/pdf',component: SideMenuPage,outlet:"sub" },        {path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},      ]   },];