Angular2 nested router outlet

Question

I'm playing around with Angular 2 and I'm having some troubles with the router. I want to have a second router-outlet inside the main router-outlet.

Inside the first router-outlet, i redirect to the Home page, where i have the second router-outlet:

<router-outlet name="main"></router-outlet>

This is my app.routing without the imports.

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent},
    { path: 'days', component: DaysComponent, outlet: 'main'}
];

export const appRoutingProviders: any[] = [

];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

On the HomeComponent ngOnInit I have this

this.router.navigateByUrl('/(main:days)');

But this crashes the web with the following error:

Uncaught (in promise): Error: Cannot find the outlet main to load 'DaysComponent'

How could have the second router-outlet inside the main one?

Thank you.

Answer 1

Try with this route configuration:

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent},

    {
        path: 'wrap',
        component: HomeComponent,
        children: [
          {
            path: 'days',
            component: DaysComponent,
            outlet: 'main'
          }
        ]
    }
];

and this URL:

this.router.navigate(['/wrap', { outlets: { main: 'days' } }]);

or (equivalent)

this.router.navigateByUrl('/wrap/(aux:aux)');