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

Question

I'm trying to make one project with one router-outlet inside another router-outlet:

It will work like this:

In the first router-outlet it will have two views:

• auth component (/login)

• admin component (/admin)

Then in the second outlet will be inside the admin component, with its own routes, that will render these:

• dashboard (/admin)

• profile (/admin/profile)

• users (/admin/users)

Now, in the Angular 2 docs, I can see they have this implementation using modules. But I don't want to use multiple modules (or I have to?).

Is there a way to make this implementation without separating modules?

I want a default component for the admin area, that is why I wanted the second router-outlet, for example: The dashboard will have the HeaderComponent, LeftNavComponent, and the DashboardCompoent. But the profile page will have all these HeaderComponent and LeftNavComponent too, and the only thing that would change is the ProfileComponent, so it will have basically the same structure. I think I don't need to repeat every importing for every different admin page. I wanted to have just one main admin component, that will have a dynamic content based on the current route.

I already tried and searched in the internet a lot, but the only example I could find is from the official Angular 2 documentation. But they are implementing this with multiple modules.

Answer 1

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!!

Answer 2

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>