时间戳

首页 > 解决方案 > 使用依赖模块的角度延迟加载

angular - 使用依赖模块的角度延迟加载

问题描述

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

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

我们有这样的路由：

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

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

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

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

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

应用程序路由.module.ts

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

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

安全路由.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 {}

用户路由.module.ts

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

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

仪表板.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 依赖于 User，而在我们的实际应用程序中，依赖关系分布在整个应用程序中。

标签： angularangular-ui-routerlazy-loadingangular-routing

解决方案

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

推荐阅读