具有多个 Angular 路由的循环依赖
Cyclic dependency with more than one Angular route
我正在使用 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 and when it does not. The relevant commit after which this issue appeared is found here.
感谢您的任何建议。我整天都在调试这个。
问题显然是由 html-webpack-plugin 与 chunksSortMode: 'dependency'
进入某种循环引起的,所以我手动排序如下:
chunks: ['polyfills', 'vendor', 'main'],
chunksSortMode: 'manual'
几天前我遇到了同样的问题。我找到了 3 个可能的修复方法。
重置chunksSortMode
plugins: [
new HtmlWebpackPlugin({
chunksSortMode: 'none'
})
]
更新html-webpack-plugin
- 将
html-webpack-plugin
更新到 v4.0.0 或更新版本,因为 toposort
was removed in v4.0.0. In addition, you can check that in the dependencies for v4.0.0
- 修复循环依赖
- 安装circular-dependency-plugin
- 运行 没有
html-webpack-plugin
的 webpack
- 如果可能,尝试修复插件报告的循环依赖关系
我还意识到 mocha-webpack 的最新版本由于 toposort
也有同样的问题,在这种情况下,我唯一的解决方案是降级 webpack@3
我正在使用 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 and when it does not. The relevant commit after which this issue appeared is found here.
感谢您的任何建议。我整天都在调试这个。
问题显然是由 html-webpack-plugin 与 chunksSortMode: 'dependency'
进入某种循环引起的,所以我手动排序如下:
chunks: ['polyfills', 'vendor', 'main'],
chunksSortMode: 'manual'
几天前我遇到了同样的问题。我找到了 3 个可能的修复方法。
重置
chunksSortMode
plugins: [ new HtmlWebpackPlugin({ chunksSortMode: 'none' }) ]
更新
html-webpack-plugin
- 将
html-webpack-plugin
更新到 v4.0.0 或更新版本,因为toposort
was removed in v4.0.0. In addition, you can check that in the dependencies for v4.0.0
- 修复循环依赖
- 安装circular-dependency-plugin
- 运行 没有
html-webpack-plugin
的 webpack
- 如果可能,尝试修复插件报告的循环依赖关系
我还意识到 mocha-webpack 的最新版本由于 toposort
也有同样的问题,在这种情况下,我唯一的解决方案是降级 webpack@3