Угловая 4 ленивая загрузка без загрузки модуля

Вопрос:

Я ленив загрузку модуля в Angular 4, но плагин Chrome Augury говорит, что модуль не загружен. Я вижу шаблоны, но без необходимых данных. Мой 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 { }

Мой пользователь.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 { }

При входе в систему, Augury показывает это:

и затем показывает правильную вещь после обновления страницы:

NB! Я знаю, что Augury также показывает другие компоненты, но даже без этих компонентов он работает неправильно и ради этой демонстрации я удалил их из своего кода выше.

Ленивая загрузка необходима, потому что компоненты в пользовательском модуле довольно большие и поэтому должны загружаться только при входе в систему.

Где могла быть эта проблема? Может ли быть порядок загрузки Angular 4?

Кажется, я пробовал все, что нашел, но пока не добился успеха. Интересно, что все работает отлично с Firefox, но проблема возникает в Chrome (не каждый раз, но примерно в 95% случаев). Проблема также возникла и на других компьютерах, и была использована последняя версия Chrome.

Ответ №1

loadchildren loadchildren:

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

В вашем случае должно быть:

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