routing + lazy loading - angular is ignoring modules in the middle of path

I’m submitting a … (check one with “x”)

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior I got problem with routing inside lazy loaded modules.

Here is my “root” routes:

const routes: Routes = [
  {path: '', redirectTo: 'admin', pathMatch: 'full' },
    {path: 'admin', loadChildren: 'app/admin.module#AdminModule'}
];

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

So what I expect from my app, is to redirect empty path to /admin - this works fine, module is loaded.

in AdminModule I got another redirect:

const routes: Routes = [
    {path: '', component: AdminComponent, children: [
        {path: '', redirectTo: 'app', pathMatch: 'full' },
        {path: 'app', loadChildren: './app/app.module#AppModule', canActivate: [ AuthGuard ] },
        {path: 'login', component: LoginComponent}
    ]},
];

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

Here I got two scenarios:

• if user is authenticated redirect to app - so the whole path would be /admin/app
• otherwise redirect to login - so the whole path should be /admin/login

and finally routing in admin application:

const routes: Routes = [
  { path: '', component: AppComponent, children: [
    { path: '',  redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent},
  ]}
];

And now problems starts. If I will enter my side with url localhost:3000/admin/app/(*) everything works as expected, AuthGuard is invoked, url is ok, in case that user is unauthenticated he gets redirect to login page.

But!: If I will enter localhost:3000 app redirects me to localhost:3000/admin/home (app is missing) and AuthGuard is not invoked. It looks like Angular is ommiting the admin-routing.module and goes directly to the last one.

Expected behavior angular should respect all modules described between root and last one.

• Angular version: “@angular/animations”: “4.0.0”, “@angular/common”: “4.0.0”, “@angular/compiler”: “4.0.0”, “@angular/core”: “4.0.0”, “@angular/forms”: “4.0.0”, “@angular/http”: “4.0.0”, “@angular/material”: “2.0.0-beta.2”, “@angular/platform-browser”: “4.0.0”, “@angular/platform-browser-dynamic”: “4.0.0”, “@angular/platform-server”: “4.0.0”, “@angular/router”: “4.0.0”,

• Browser: all

• Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript 2.X

[reppners]

@maciejtreder

I struggled with a problem quite similar to yours until I found out that I statically imported the module that should be lazy loaded in a parent module. Double check that you’re not importing the lazy loaded module statically. Sounds like a good candidate for a codelyzer rule.

[mariuslazar93]

I had some sort of the same issue, but understanding what should be and what shouldn’t be imported solved my issue.

Make sure you don’t import AdminModule inside the your main/root app component (where you import MainRoutingModule). You also don’t need to import AppModule inside AdminRoutingModule and also make sure you don’t import AppModule inside the AdminModule (where you import AdminRoutingModule). Since they are lazy loaded modules (both AdminModule and AppModule), they shouldn’t be imported anywhere.