Angular 4延迟加载不加载模块

Question

我在 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 { }

我的 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 { }

登录时，Augury 会显示：

然后刷新页面后显示正确的东西：

注意！我知道 Augury 也显示了其他组件，但即使没有这些组件，它也无法正常工作，为了这个演示，我从上面的代码中删除了它们。

需要延迟加载，因为用户模块中的组件非常大，因此只能在登录时加载。

这个问题可能出在哪里？会不会是 Angular 4 的加载顺序？

我想我已经尝试了所有我找到的方法，但还没有成功。有趣的是，Firefox 似乎一切正常，但问题出现在 Chrome 中（不是每次，但大约 95% 的时间）。其他电脑也出现此问题，使用的是最新的 Chrome 版本。

Answer 1

loadchildrensynax：

{
  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] 
       }
    ];