Angular 8 - 自行实现懒加载 - AoT "No NgModule metadata"

Question

我正在处理一个Angular项目，可以懒加载小部件，并从UMD包中加载它们。

目前，在启用AoT的情况下构建项目时，我遇到了一些问题。

问题是：AoT构建不提供编译器。因此，我提供了JITCompiler给应用程序。

当使用JITCompiler编译生产模式中的一个模块时，使用import(path/to/module)语句，我遇到了以下错误信息：

main.e522a776bacf42032766.js:1 ERROR Error: No NgModule metadata found for 'function(){}'.
    at e.resolve (main.e522a776bacf42032766.js:1)
    at e.getNgModuleMetadata (main.e522a776bacf42032766.js:1)
    at e._loadModules (main.e522a776bacf42032766.js:1)
    at e._compileModuleAndComponents (main.e522a776bacf42032766.js:1)
    at e.compileModuleAsync (main.e522a776bacf42032766.js:1)
    at e.compileModuleAsync (main.e522a776bacf42032766.js:1)
    at t.project (main.e522a776bacf42032766.js:1)
    at t._tryNext (main.e522a776bacf42032766.js:1)
    at t._next (main.e522a776bacf42032766.js:1)
    at t.next (main.e522a776bacf42032766.js:1)

改变了什么

列举模块的属性，使用ng serve和ng serve --prod有所不同：[ngInjectorDef]在开发环境中作为服务，而在生产环境中是[]。

我想知道是否有其他人遇到过这个问题？

复制测试

在此处有一个最小化项目的工作示例：https://stackblitz.com/edit/angular-mpzmle

要将其作为生产服务器提供服务，您需要：

• 下载zip文件
• 解压缩zip文件
• 在提取目录中运行npm install
• 调整tsconfig.json（无法在stackblitz中进行调整？）
  • 将module更改为esnext
• 运行ng serve --prod并提供到localhost:4200

另一种替代手工方法是按照https://github.com/juristr/manually-lazy-load-ngmodule/issues/1上的步骤进行操作。 它是一个实现类似概念的项目，受到相同问题的困扰。

- Jeffrey Devloo

---

进一步调查了该问题，我发现了以下来源： https://github.com/angular/angular/issues/20875，https://github.com/angular/angular-cli/issues/9306#issuecomment-378304155。 问题在于我想要动态加载的模块上的装饰器被丢弃了。 - Jeffrey Devloo

Answer 1

感谢 Github 上的 Antur84 提供了这里的回复。

编译器查找具有“loadChildren”属性的对象。如果该属性的语法为import(...).then(m => m.SOME_EXPORT)，则会跟踪该 URL 并将其编译成适当的工厂。

因此，我不得不重构我的回调键和传递函数的返回类型。

- Jeffrey Devloo