Question

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

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

我们的路由如下：

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

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

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

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

我已经在此演示应用程序中复制了此问题，此处为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 {}

secure-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 {}

dashboard-routing.module.ts

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

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

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

Answer 1

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

相关模块的角延迟加载

1 个答案: