Angular2 - children routes on root route with named outlets not working

Question

I have the following routing configuration:

export const ROUTES: Routes = [
  { path: '',
    component: MainComponent,
    children: [
      {
        path: 'hero-video',
        component: HeroOverlayComponent,
        outlet: 'overlay'
      }
    ]
  }
];

export const appRouting = RouterModule.forRoot(ROUTES);

The idea is that I have one component who has an overlay routing outlet which shows different outlets on that main page. However that does not work, I always get the error that is no such route.

If I remove the outlet part (and of course also update the selector, everything works.

export const ROUTES: Routes = [
  { path: '',
    component: MainComponent,
    children: [
      {
        path: 'hero-video',
        component: HeroOverlayComponent
      }
    ]
  }
];

export const appRouting = RouterModule.forRoot(ROUTES);

Do I miss something or why is the behaviour different if I use a named router outlet or not for root routes?

Answer 1

Route configuration looks fine. It seems that Angular has an issue with how you're exporting the router. I'd suggest changing how you're serving the RouterModule.

I'd create AppRoutingModule and then import it to main AppModule instead of doing it your way.

const ROUTES: Route[] = [
  { path: '',
    component: MainComponent,
    children: [
      {
        path: 'hero-video',
        component: HeroOverlayComponent,
        outlet: 'overlay'
      }
    ]
  }
];

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

Then in your app.module.ts

@NgModule({
  imports: [
   // your imports here
   AppRoutingModule
  ],
  // rest of your configuration here
})
export class AppModule {}