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是如何产生延迟加载模块的。这是一个非常复杂的过程。但关键点在于@angular/core/src/linker路径上的relies。

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

因此，请尝试禁用ContextReplacementPlugin进行生产构建。

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

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

1 个答案: