我正在尝试将延迟加载集成到我的Angular应用程序中。
我有4个模块。每个模块都是延迟加载的。
前3个模块将导入我的自定义TitleModule。
我的问题：如果所有路由都被lazyLoaded处理，那么TitleModule会发生什么？它会生成3次并将其大小添加到lazyLoadedModule吗？还是仅用一个文件大小将其生成一次并在所有三个模块中使用？
答案 0 :(得分：0)
这是此示例的有效项目：stackblitz。
我正在回答这两个问题：
1。捆绑软件中出现TitleModule（title.module.ts）多少次？
答案： 1 。
由于TitleModule被导入多个dependency graph，
（每个LazyLoaded模块一个。例如：loadChildren: () => import('app/first-page-with-title-module.module').then(m =>m.FirstPageWithTitleModule) ）
Webpack足够聪明，可以检测到多个引用，并且他将为共享模块（文件）创建一个单独的块。 （Angular作为webpack中的插件运行）
这里是与此场景相关的small example from webpack documentation。
在演示中：您可以在控制台中看到 webpack解析title-module.ts 1次。由于webpack只将模块（文件）推送到包一次，因此只需要读取一次，然后在其缓存中读取
。 2。 TitleModule将实例化多少次？
答案： 3
每个loadChildren回调最终以here in angular source code结尾并执行factory.create(parentInjector)，这意味着将创建一个新的NgModule作为父路由的子代。
所以现在我们有3个新的延迟加载模块：
每个人尝试破译其TitleModule装饰器的import数组时，都会创建NgModule对象。 TitleModule中不存在parentInjector对象，并且惰性模块不共享Modules，InjectionTokens（提供者），除非它们在共享的祖先注入器中。
在演示中：您可以在console.log中看到 TitleModule实例化3次（每次输入路由时都会实例化-除非已在此路由中创建）-最多3个。