AOT: ngtools/webpack + 延迟加载不起作用。使用：Angular 4，webpack 3

Question

我尝试使用 ngtools/webpack 进行 AOT 编译。在我尝试创建延迟加载的路由之前，它工作正常。我得到的错误 - Error: Cannot find module './components/dashboard/dashboard.module.ngfactory'.。在 dist 文件夹中，我还缺少用于延迟加载包的块。

我不知道我做错了什么，我花了很多时间来解决这个问题。我在 this repo 中创建了一个简单的项目 tour of heroes，但出现了上述错误。回购中的分支是 angular-aot-refactor。当您到达应用程序的根目录时 - 只需 npm install 和 npm run dev:aot.

问题是 - 我做错了什么导致延迟加载不起作用？

在此先感谢您的帮助！

Answer 1

你的问题是the following code:

new webpack.ContextReplacementPlugin(
    // The (\|\/) piece accounts for path separators in *nix and Windows
    /angular(\|\/)core(\|\/)@angular/,
    helpers.root('./src'), // location of your src
    {} // a map of your routes
),

要理解为什么这个插件在构建 aot 时会导致问题，您应该知道@angular/cli 是如何产生延迟加载模块的。这是一个非常复杂的过程。但这里的关键点是它 relies 在 @angular/core/src/linker 路径上。

由于您要替换该路径，因此不会生成延迟加载模块的映射（angular/cli uses ContextElementDependency）。

因此请尝试为生产版本禁用 ContextReplacementPlugin。

P.S。事实证明这是一个众所周知的问题：

AOT: ngtools/webpack + 延迟加载不起作用。使用：Angular 4，webpack 3

AOT: ngtools/webpack + lazy loading does not work. Using: Angular 4, webpack 3

angular2-aot

angular