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.

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

Solution 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' }
    ]
  }
];

Use forChild() in imports of user-checkin-routing.module.ts as

RouterModule.forChild(routes)

After this you will have to export your UserCheckinRoutingModule in UsercheckinModule. 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> 

Comments

[Günter Zöchbauer]

Modules are required for lazy loading and, as far as I know, will be mandatory after the next update because Component.pipes and Component.directives are deprecated.

[Thiago Yoithi]

Good to know! Yesterday I asked myself why they are not using the ".directives" attribute in their (Angular 2 documentation) examples. So now everything will be imported from the modules, and not from the component? If that's the case, one more reason to work with modules right now! Hahahah.

[Thiago Yoithi]

Thank you for the response! Right after posting this question I have read the angular 2 documentation again and now I understand how to work with all those modules, routes and child routes, I think I'll go this way. Your example result is a little different than the one I expected, I wanted two router-outlet, one to switch between /login and /admin, and the another outlet would go inside /admin to navigate between those belongings to /admin path. But thanks to your example, now I can understand how I could modify it to make everything work as I desired before. So thank you again for your help!

[Madhu Ranjan]

@ThiagoYoithi: Good to know it helped... Cheers!

[Patrice]

@günter-zöchbauer any example taking advantage of lazy loading of modules.