时间戳

首页 > 解决方案 > 角度延迟加载重复模块

angular - 角度延迟加载重复模块

问题描述

我正在尝试将延迟加载集成到我的 Angular 应用程序中。

我有 4 个模块。每个模块都是延迟加载的。

前 3 个模块正在导入我的自定义 TitleModule。

我的问题：如果所有路由都是lazyLoaded，TitleModule 会发生什么？它会生成 3 次并将其大小添加到lazyLoadedModule 中吗？或者它是否会以单一文件大小仅生成 1 次并在所有三个模块中使用？

标签： angular

解决方案

这是此示例的一个工作项目：stackblitz。

我正在回答这两个问题：

TitleModule1. (title.module.ts) 会在包中出现多少次？

答：1。

由于是在多个依赖图sTitleModule中导入的，

（每个 LazyLoaded 模块一个。例如loadChildren: () => import('app/first-page-with-title-module.module').then(m =>m.FirstPageWithTitleModule) ：）

Webpack 足够聪明，可以检测到这些多个引用，他将为共享模块（文件）创建一个单独的块。（Angular 作为 webpack 中的插件运行）

这是webpack 文档中与此场景相关的一个小示例。

在demo中：可以在控制台看到title-module.ts被webpack解析了1次。由于 webpack 只将模块（文件）推送到包中一次，因此它只需要读取一次，然后将其放在缓存中。

TitleModule2.实例化多少次？

答案：3

每个loadChildren回调最终都会在 Angular 源代码中结束并执行factory.create(parentInjector)，这意味着将创建一个新的 NgModule 作为父路由的子路由。

所以现在我们有 3 个新的延迟加载模块：

  • FirstPageWithTitleModule
  • SecondPageWithTileModule
  • ThirdPageWithTileModule

TitleModule当他试图破译其装饰器的import数组时，每个人都会创建对象。对象中不存在并且惰性模块不共享模块，InjectionTokens(providers)，除非它们在共享的祖先注入器中。NgModuleTitleModuleparentInjector

在演示中：您可以在 console.log 中看到 TitleModule 实例化 3 次（每次输入路由时它都会实例化 - 除非它已经在此路由中创建） - 最大数量为 3。

推荐阅读