Angular 延迟加载依赖模块

Question

我正在将 Angular 应用程序转换为延迟加载。有多个模块相互依赖。

最初我们导入了 app.module.ts 中的所有模块（在登录页面加载所有模块），但现在我们延迟加载它并引入了一个安全模块，在成功登录后加载。我们还在安全模块上延迟加载了子模块（路由配置可以在下面的代码中看到）。

我们有这样的路由：

/secure/dashboard（dashboard在Secure模块上延迟加载，Secure在App模块上延迟加载）
/secure/user（用户在安全模块上延迟加载）
/secure/user/edit（编辑在用户模块的路由中）

在我们的应用中有多种情况，Dashboard 模块需要导入 User 模块（这种情况）。由于哪个仪表板将用户路由加载到其路由配置，例如

/secure/dashboard/edit（该编辑组件是从User模块导入的）- 问题

我想要实现的是，我在仪表板中包含了用户模块，但没有包含用户路由。

我已在此演示应用程序中重现了此问题，此处：https://stackblitz.com/edit/deep-lazyloading-routes

app-routing.module.ts

const routes: Routes = [
  { path: 'secure', loadChildren: './secure/secure.module#SecureModule' }
];

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

安全-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: SecureComponent,
    children: [
      { path: 'dashboard', loadChildren: '../dashboard/dashboard.module#DashboardModule' },
      { path: 'user', loadChildren: '../user/user.module#UserModule' }
    ]
  }
];

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

仪表板-routing.module.ts

const routes: Routes = [
  { path: '', component: DashboardComponent }
];

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

用户-routing.module.ts

const routes: Routes = [
  { path: '', component: UserComponent },
  { path: 'edit', component: UserEditComponent },
];

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

dashboard.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';
import { UserModule } from '../user/user.module';

import { Router} from '@angular/router';

@NgModule({
  imports:      [ CommonModule, FormsModule, DashboardRoutingModule, **UserModule** ],
  declarations: [ DashboardComponent ],
})
export class DashboardModule {
  constructor(private router: Router) {
    console.log("Router Config:")
    console.log(this.router.config);
  }
}

注意：在这个演示应用程序中，只有 Dashboard 依赖于用户，而在我们的真实应用程序中，依赖项分布在整个应用程序中。

Answer 1

路由是任何模块的组成部分。延迟加载时，我们不能在急切加载的模块中引用此类模块（带路由）。最好创建一个共享模块并导入它。

Angular 延迟加载依赖模块

Angular Lazy Loading with Dependent Modules

angular

angular-ui-router

lazy-loading

angular-routing