Angular 4 lazy loading not loading the module

Question

I'm lazy loading a module in Angular 4, but Chrome Augury plugin says the module is not loaded. I see the templates, but without the necessary data. My app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { InvalidRequestComponent } from './components/invalid-request.component';
import { RoleResolver } from './services/role-resolver.service';
import { LoadingComponent } from './components/loading.component';
import { AuthResolver } from './services/auth-resolve.service';

const appRoutes: Routes = [
  { path: '', component: LoadingComponent, resolve: { RoleResolver } },
  { path: 'user', loadChildren: 'app/ROLE_USER/user.module#UserModule', resolve: { AuthResolver } },'app/ROLE_USER/user.module#UserModule', resolve: { AuthResolver } },
  { path: '**', component: InvalidRequestComponent }
];

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

My user.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { UserRoutingModule } from './user-routing.module';

import { UserComponent } from './user.component';
import { HeaderComponent } from './components/plan/header.component';
import { CompanyProfileComponent } from './components/plan/company-profile.component';
import { DataService } from './services/data.service';

@NgModule({
  declarations: [
    UserComponent,
    HeaderComponent,
    CompanyProfileComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    UserRoutingModule
  ],
  providers: [
    DataService
  ]
})
export class UserModule { }

When logging in, Augury shows this:

and then shows the correct thing after refreshing the page:

NB! I know Augury shows other components as well, but even without those components it's not working correctly and for the sake of this demo I removed them from my code above.

Lazy loading is needed because the components in user module are pretty big and therefore should only be loaded when logging in.

Where could this problem be lying? Could it be the order of loading by Angular 4?

I think I've tried everything I've found but having no success yet. The interesting thing is, everything seems to be working fine with Firefox but the problem occurs in Chrome (not every time, but about 95% of the time). The problem has happened on other computers also and the latest Chrome version was used.

Answer 1

loadchildren synax:

{
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule',
  canLoad: [AuthGuard]
},

In your case should be:

  const appRoutes: Routes = [   
      { path: 'user', 
        loadChildren: 'app/ROLE_USER/user.module#UserModule', 
       canLoad:[AuthResolver] 
      },  
      {
        path: 'anotherPath', 
        loadChildren: 'anotherChildrenModule', 
        canLoad:[AuthResolver] 
       }
    ];