具有多个 Angular 路由的循环依赖

Question

我正在使用 Webpack 4.15.1 开发 Angular 6.0.7 应用程序。该应用程序在使用 webpack-dev-server 时运行良好，但是一旦我尝试使用生产模式构建它，它就会在 HtmlWebpackPlugin 发出阶段失败。

它一定与 HtmlWebpackPlugin 有关，因为如果我删除该插件，那么 javascript 文件就会毫无问题地生成。这可能与生成的块的数量有关。

直到我向我的应用程序添加了两条新路由后才发生这种情况。一旦我删除 任何两个 路由，应用程序就可以正常编译。这是错误：

> webpack --config webpack/webpack.production.config.js --progress

clean-webpack-plugin: C:\example\WiFi-Setup\bin has been removed.
 95% emitting HtmlWebpackPluginUnhandled rejection Error: Cyclic dependency
    at visit (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\node_modules\toposort\index.js:35:13)
    at visit (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\node_modules\toposort\index.js:53:9)
    at visit (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\node_modules\toposort\index.js:53:9)
    at Function.toposort [as array] (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\node_modules\toposort\index.js:22:22)
    at Object.module.exports.dependency (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\lib\chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (C:\example\WiFi-Setup\node_modules\html-webpack-plugin\index.js:364:35)
    at C:\example\WiFi-Setup\node_modules\html-webpack-plugin\index.js:113:21
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\example\WiFi-Setup\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:12:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\example\WiFi-Setup\node_modules\tapable\lib\Hook.js:35:21)
    at Compiler.emitAssets (C:\example\WiFi-Setup\node_modules\webpack\lib\Compiler.js:364:19)
    at onCompiled (C:\example\WiFi-Setup\node_modules\webpack\lib\Compiler.js:231:9)
    at hooks.afterCompile.callAsync.err (C:\example\WiFi-Setup\node_modules\webpack\lib\Compiler.js:553:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\example\WiFi-Setup\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\example\WiFi-Setup\node_modules\tapable\lib\Hook.js:35:21)
    at compilation.seal.err (C:\example\WiFi-Setup\node_modules\webpack\lib\Compiler.js:550:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\example\WiFi-Setup\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\example\WiFi-Setup\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.optimizeAssets.callAsync.err (C:\example\WiFi-Setup\node_modules\webpack\lib\Compilation.js:1283:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\example\WiFi-Setup\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (C:\example\WiFi-Setup\node_modules\tapable\lib\Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (C:\example\WiFi-Setup\node_modules\webpack\lib\Compilation.js:1274:32)
    at _err0 (eval at create (C:\example\WiFi-Setup\node_modules\tapable\lib\HookCodeFactory.js:24:12), <anonymous>:16:1)
    at C:\example\WiFi-Setup\node_modules\uglifyjs-webpack-plugin\dist\index.js:282:11
    at step (C:\example\WiFi-Setup\node_modules\uglifyjs-webpack-plugin\dist\uglify\index.js:90:11)
    at done (C:\example\WiFi-Setup\node_modules\uglifyjs-webpack-plugin\dist\uglify\index.js:99:22)
    at tryCatcher (C:\example\WiFi-Setup\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\example\WiFi-Setup\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (C:\example\WiFi-Setup\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (C:\example\WiFi-Setup\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (C:\example\WiFi-Setup\node_modules\bluebird\js\release\promise.js:693:18)
    at Promise._fulfill (C:\example\WiFi-Setup\node_modules\bluebird\js\release\promise.js:638:18)
    at Promise._resolveCallback (C:\example\WiFi-Setup\node_modules\bluebird\js\release\promise.js:432:57)
    at Promise._settlePromiseFromHandler (C:\example\WiFi-Setup\node_modules\bluebird\js\release\promise.js:524:17)
    at Promise._settlePromise (C:\example\WiFi-Setup\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (C:\example\WiFi-Setup\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (C:\example\WiFi-Setup\node_modules\bluebird\js\release\promise.js:693:18)

我尝试创建一个可运行的小型示例，但无法复制该问题。这是存储库when it compiles 和when it does not。出现此问题的相关提交位于 here。

感谢您的任何建议。我已经调试了一整天了。

Answer 1

几天前我遇到了同样的问题。我找到了 3 个可能的修复方法。

1. 重置chunksSortMode

   plugins: [
        new HtmlWebpackPlugin({
            chunksSortMode: 'none'
        })
    ]

2. 更新html-webpack-plugin

• 将html-webpack-plugin 更新到v4.0.0 或更新版本，因为toposort was removed in v4.0.0。此外，您可以在dependencies for v4.0.0

1. 修复循环依赖

• 安装circular-dependency-plugin
• 在没有html-webpack-plugin 的情况下运行 webpack
• 如果可能，尝试修复插件报告的循环依赖关系

我也意识到mocha-webpack 的最新版本由于toposort 而存在同样的问题，在这种情况下，我唯一的解决方案是降级webpack@3

Answer 2

这个问题显然是由于 html-webpack-plugin 进入了chunksSortMode: 'dependency' 的某种循环，所以我改为手动排序：

chunks: ['polyfills', 'vendor', 'main'],
chunksSortMode: 'manual'