Angular 4 auxiliary route not working as expected

Question

I have an application where I have one login component and a home module. I want to have an aux route inside the home module.

As soon as the user logs in I am redirecting to the home route.

This is my app-routing.module

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Below is my home-routing.module.ts

const routes: Routes = [
    {
        path: 'home',
        children: [
            {
                path: '',
                component: HomeComponent,
                canActivate: [CanActivateGuard]
            },
            {
                path: '',
                outlet: 'aux',
                component: DashboardComponent,
                canActivate: [CanActivateGuard]
            }
        ]
    }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

My expectation is that when the app is redirected to the home route this.router.navigate(['/home']); then both HomeComponent should be rendered (which is rendering right now) and DashboardComponent should be rendered (which is not rendering)

I tried all sort of hacks like providing a path to the component which need to be rendered inside aux route to 'dashboard' and from home component's ngOnInit method trying to redirect to the dashboard route this.router.navigate([{ outlets: { aux: 'dashboard' }}]);

But noting seems to work. What is it that I am doing wrong?

NOTE: When Angular processes routes it goes with the first one it finds. It won't process multiple routes with the same path. In the above routes you defined two with an empty path. It will always only pick the first one. — DeborahK

DeborahK DeborahK · Accepted Answer · 2017-06-23T06:31:28

The syntax to activate both a primary route and a secondary (aux) route looks like this:

this.router.navigate(['/home', { outlets: { aux: 'dashboard' }}]);

However, as far as I know there is still a bug in the routing and this syntax does not work. (At least it didn't for me about 2 months ago when I tried it.)

I had to instead use syntax like this:

this.router.navigate([{ outlets: { 
                           primary: ['/home'], 
                           aux: ['dashboard'] 
}}]);

This syntax basically treats both routes as named routes and uses the Angular-defined name for the primary route ("primary"). You don't have to change your route configurations for this to work.

Angular 4 auxiliary route not working as expected

1 Answers