具有多个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)

我试图创建一个小的可运行示例,但无法复制该问题.这里是仓库时,它编译和当它没有.此问题出现之后的相关提交可在此处找到.

谢谢你的任何建议.我整天都在调试这个.

Answer 1

几天前我遇到了同样的问题.我找到了3个可能的修复程序.

1. 重启 chunksSortMode

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

2. 更新 html-webpack-plugin

   • npm i --save-dev html-webpack-plugin@next
   • 在最新版本中,他们删除了toposort(导致错误的lib)

3. 修复循环依赖项

   • 安装circular-dependency-plugin
   • 不用运行webpack html-webpack-plugin
   • 尽可能尝试修复插件报告的循环依赖项

另外我意识到mocha-webpack的最新版本有同样的问题,因为toposort在这种情况下我唯一的解决方案是降级webpack@3