Angular 2, RC5 router-outlet inside another router-outlet

Although Modules are recommended they are optional for any route navigation.

You may configure routing like below without any modules.

app.routing

import { Routes, RouterModule }   from '@angular/router';      import { DashboardComponent,          AdminComponent,         ProfileComponent,         UsersComponent      } from './app.component';      const appRoutes: Routes = [      {        path: '',        redirectTo: '/dashboard/admin/users',        pathMatch: 'full'      },      {        path: 'dashboard',        component: DashboardComponent,        children:[        {         path : 'admin',         component: AdminComponent,         children:[           {            path : 'users',            component: UsersComponent           },           {            path : 'profile',            component: ProfileComponent           }         ]        }       ]     }    ];    export const routing = RouterModule.forRoot(appRoutes);

components

import { Component }          from '@angular/core';@Component({  selector: 'my-app',  template: `    <h3 class="title">Routing Deep dive</h3>    <hr />    <router-outlet></router-outlet>  `})export class AppComponent {}@Component({  template: `    <h3 class="title">Dashboard</h3>    <nav>    </nav>    <hr />    <router-outlet></router-outlet>  `})export class DashboardComponent {}@Component({  template: `    <h3 class="title">Admin</h3>    <nav>      <a routerLink="users" routerLinkActive="active" >Users</a>      <a routerLink="profile" routerLinkActive="active" >Profile</a>    </nav>    <hr />    <router-outlet></router-outlet>  `})export class AdminComponent {}@Component({  template: `    <h3 class="title">Profile</h3>  `})export class ProfileComponent {}@Component({  template: `    <h3 class="title">Users</h3>    <hr />  `})export class UsersComponent {}

Here is the Plunker!!

Adding a solution with lazy loaded modules. This is a generic answer according to title and not to the body of the original question.

I created a separate module named UserCheckinModule for non-logged user containing Login and Signup pages/components as they usually share common design and functions/services.

Routes defined in app.routing.module.ts -

const routes: Routes = [  { path: 'user', loadChildren: './user-checkin/user-checkin.module#UserCheckinModule' },  { path: '**', redirectTo: 'user' }];

Routes defined in user-checkin.-routing.module.ts for UserCheckin module -

const routes: Routes = [  {    path: '',    component: CheckinComponent, // base template component    children: [      { path: '', redirectTo: 'login' },      { path: 'login', component: LoginComponent },      { path: 'signup', component: SignupComponent },      { path: '**', redirectTo: 'login' }    ]  }];

The app.component.html already contains a router-outlet and behaves as the base template/layout for the whole app. The UserCheckinModule is a child module and has its own routes and base template.

Content of checkin.component.html base template -

<router-outlet></router-outlet>