I am trying to have lazy loading work with nested router outlets but without luck.

Is this supported at all in Angular 4?

This is my use case:

There seems to be a problem when using router navigation with lazy loaded modules. This works fine if I remove lazy loading. But here is my setup according to lazy loading modules:

In my app.template I have the main router-outlet defined.

I have the following root app router

export const ROUTES: Routes = [
  {
    path: 'user/:id', loadChildren: './user/profile/profile.module#ProfileModule'
  }
]

When the profile module is loaded into the main router-outlet it will display a page with two routing tabs and an inside profile.module I have the following child routes defined

const ROUTES: Routes = [
    {
        path: '', component: ProfileComponent,
        children: [
            { path: 'subPath1', loadChildren: '../subModule1/subModule1.module#SubModule1Module' },
            { path: 'subPath2', loadChildren: '../subModule2/subModule2.module#SubModule2Module' },
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(ROUTES),
     ....
    ]
}

Inside profile.template I have routing tab defined like this

<nav md-tab-nav-bar>
          <a class="tab-label" md-tab-link [routerLink]="'subPath1'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
            Sub path 1
          </a>
          <a class="tab-label" md-tab-link [routerLink]="'subPath2'" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
            Sub path 2
          </a>
        </nav>
      <router-outlet></router-outlet>

When I route e.g. to /user/:id/subPath2 I would expect subModule2 to be loaded into the router-outlet of the md-tab-nav-bar but instead, it is being loaded into the main application router-outlet. This closes the profile.component and displays only submodule2 instead of displaying it inside the tab.

Any idea why this is not working with lazy loading modules?