angular - AOT : ngtools/webpack + lazy loading does not work. 使用 : Angular 4, webpack 3

Question

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

我不知道我做错了什么，我花了很多时间来解决这个问题。我在 this repo 中创建了一个简单的项目 tour of heroes ，在那里我得到了上述错误。 repo 中的分支是 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。

附言事实证明这是一个众所周知的问题:

• https://github.com/angular/angular-cli/issues/4431

• https://github.com/angular/angular-cli/issues/8597#issuecomment-346605655