Angular 在代码中延迟加载模块（无路由）

Question

在 aspnet 核心应用程序中，我目前在 app.modules.ts

中有这个

import {
  DxDataGridModule,
  DxButtonModule,
  DxNumberBoxModule,
  DxTextBoxModule,
  DxSelectBoxModule,
  DxValidatorModule,
  DxValidationGroupModule,
  DxValidationSummaryModule,
  DxTextAreaModule,
  DxLoadPanelModule,
  DxTemplateModule
} from 'devextreme-angular';

我的主页只使用了上面的两个。我想将其余部分的加载延迟到用户导航到使用它们的页面的那一刻。

假设我有 home.component、page1.component、page2.component

home 使用 2 个 DX 模块，page1 和 page2 使用所有模块的各种子集..

我花了很多时间诚实地试图理解延迟加载是如何工作的，但失败了。阅读数十篇博客 - 所有博客都展示了如何在 RouterModule 或单个模块中加载单个组件。

我可以完全不使用 RouterModule 而只加载 home.component 的 onInit 中的模块吗？如果没有 - 我如何使用 await 加载一堆模块？

RouterModule 现在是：

{ path: '', component: HomeComponent },
{ path: 'page1', component: Page1Component }, 
{ path: 'page2' , component: Page2Component },

Answer 1

针对这个特定问题，Angular 引入了延迟加载概念。

这里你需要做的是，你上面提到的每个组件，home，page-1和page-2每个组件都应该做成一个模块，然后你就可以使用延迟加载了。

文件结构应该是这样的：

home
|__home.component.html
 __home.component.scss
 ___home.component.spec.ts
 ___home.component.ts
 ___ home.module.ts


// This particular home.module.ts will have homeComponent as declarations and its necessary imports and exports. 

// This will be the same for page-1 and page-2 as well. 

// Now in your routing.module, it will be like this: 

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'page-1',
    loadChildren: () => import('./page1/page1.module').then(m => m.Page1Module)
  }
];


this will load that part only when the route is inititated

Answer 2

如果您在子模块中导入第 3 方模块，它们只会在子模块加载时加载。从全局 app.module.ts.

中删除它们

因此您的主模块可能如下所示：

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: "page1",
        loadChildren: () =>
          import("./module1/module1.module").then(m => m.Module1Module)
      },
      {
        path: "page2",
        loadChildren: () =>
          import("./module2/module2.module").then(m => m.Module2Module)
      }
    ])
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

并且您的第一个子模块仅使用 DxTextBoxModule 例如：

@NgModule({
  imports: [
    CommonModule,
    DxTextBoxModule,
    RouterModule.forChild([
      {
        path: "",
        component: Page1Component
      }
    ])
  ],
  declarations: [Page1Component]
})
export class Module1Module {}

您的第二个子模块仅使用 DxSelectBoxModule 例如：

@NgModule({
  imports: [
    CommonModule,
    DxSelectBoxModule,
    RouterModule.forChild([
      {
        path: "",
        component: Page2Component
      }
    ])
  ],
  declarations: [Page2Component]
})
export class Module2Module {}

这是一个工作示例：StackBlitz

Angular 在代码中延迟加载模块（无路由）

Angular lazy load modules in code (no routing)

devextreme

asp.net-core

angular

devextreme-angular

angular10