具有多个角度路线的循环依赖 [英] 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 --progressclean-webpack-plugin:C:\ example \ WiFi-Setup \ bin已被删除.95％的HtmlWebpackPlugin发出未处理的拒绝错误:循环依赖性访问时(C:\ example \ WiFi-Setup \ node_modules \ html-webpack-plugin \ node_modules \ toposort \ index.js:35:13)访问时(C:\ example \ WiFi-Setup \ node_modules \ html-webpack-plugin \ node_modules \ toposort \ index.js:53:9)访问时(C:\ example \ WiFi-Setup \ node_modules \ html-webpack-plugin \ node_modules \ toposort \ index.js:53:9)在Function.toposort [作为数组]处(C:\ example \ WiFi-Setup \ node_modules \ html-webpack-plugin \ node_modules \ toposort \ index.js:22:22)在Object.module.exports.dependency(C:\ example \ WiFi-Setup \ node_modules \ html-webpack-plugin \ lib \ chunksorter.js:50:35)在HtmlWebpackPlugin.sortChunks(C:\ example \ WiFi-Setup \ node_modules \ html-webpack-plugin \ index.js:364:35)在C:\ example \ WiFi-Setup \ node_modules \ html-webpack-plugin \ index.js:113:21在AsyncSeriesHook.eval [作为callAsync](在创建时(C:\ example \ WiFi-Setup \ node_modules \ tapable \ lib \ HookCodeFactory.js:24:12)评估，< anonymous>:12:1)在AsyncSeriesHook.lazyCompileHook [作为_callAsync](C:\ example \ WiFi-Setup \ node_modules \ tapable \ lib \ Hook.js:35:21)在Compiler.emitAssets(C:\ example \ WiFi-Setup \ node_modules \ webpack \ lib \ Compiler.js:364:19)在onCompiled(C:\ example \ WiFi-Setup \ node_modules \ webpack \ lib \ Compiler.js:231:9)在hooks.afterCompile.callAsync.err(C:\ example \ WiFi-Setup \ node_modules \ webpack \ lib \ Compiler.js:553:14)在AsyncSeriesHook.eval [作为callAsync](在创建时(C:\ example \ WiFi-Setup \ node_modules \ tapable \ lib \ HookCodeFactory.js:24:12)评估，< anonymous>:15:1)在AsyncSeriesHook.lazyCompileHook [作为_callAsync](C:\ example \ WiFi-Setup \ node_modules \ tapable \ lib \ Hook.js:35:21)在compile.seal.err(C:\ example \ WiFi-Setup \ node_modules \ webpack \ lib \ Compiler.js:550:30)在AsyncSeriesHook.eval [作为callAsync](在创建时(C:\ example \ WiFi-Setup \ node_modules \ tapable \ lib \ HookCodeFactory.js:24:12)评估，< anonymous>:9:1)在AsyncSeriesHook.lazyCompileHook [作为_callAsync](C:\ example \ WiFi-Setup \ node_modules \ tapable \ lib \ Hook.js:35:21)在hooks.optimizeAssets.callAsync.err(C:\ example \ WiFi-Setup \ node_modules \ webpack \ lib \ Compilation.js:1283:35)在AsyncSeriesHook.eval [作为callAsync](在创建时(C:\ example \ WiFi-Setup \ node_modules \ tapable \ lib \ HookCodeFactory.js:24:12)评估，< anonymous>:9:1)在AsyncSeriesHook.lazyCompileHook [作为_callAsync](C:\ example \ WiFi-Setup \ node_modules \ tapable \ lib \ Hook.js:35:21)在hooks.optimizeChunkAssets.callAsync.err(C:\ example \ WiFi-Setup \ node_modules \ webpack \ lib \ Compilation.js:1274:32)在_err0处(在创建时评估(C:\ example \ WiFi-Setup \ node_modules \ tapable \ lib \ HookCodeFactory.js:24:12)，< anonymous>:16:1)在C:\ example \ WiFi-Setup \ node_modules \ uglifyjs-webpack-plugin \ dist \ index.js:282:11在步骤(C:\ example \ WiFi-Setup \ node_modules \ uglifyjs-webpack-plugin \ dist \ uglify \ index.js:90:11)完成时(C:\ example \ WiFi-Setup \ node_modules \ uglifyjs-webpack-plugin \ dist \ uglify \ index.js:99:22)在tryCatcher(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ util.js:16:23)在Promise._settlePromiseFromHandler(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ promise.js:512:31)在Promise._settlePromise(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ promise.js:569:18)在Promise._settlePromise0(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ promise.js:614:10)在Promise._settlePromises(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ promise.js:693:18)在Promise._fulfill(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ promise.js:638:18)在Promise._resolveCallback(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ promise.js:432:57)在Promise._settlePromiseFromHandler(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ promise.js:524:17)在Promise._settlePromise(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ promise.js:569:18)在Promise._settlePromise0(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ promise.js:614:10)在Promise._settlePromises(C:\ example \ WiFi-Setup \ node_modules \ bluebird \ js \ release \ promise.js:693:18) 

我试图创建一个小的可运行示例，但无法复制该问题.这是存储库编译时和此处中找到相关的提交...>

感谢您的任何建议.我整天都在调试.

解决方案

几天前，我遇到了相同的问题.我发现了3种可能的修复方法.

1. 重置 chunksSortMode

    插件:[新的HtmlWebpackPlugin({chunksSortMode:'无'})]  

2. 更新 html-webpack-plugin

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

3. 修复循环依赖项

   • 安装 circular-dependency-plugin
   • 在没有 html-webpack-plugin
   的情况下运行webpack
   • 尝试修复插件报告的循环依赖项

我还意识到 mocha-webpack 的最新版本由于<在这种情况下，code> toposort 对我来说唯一的解决方案是将 webpack @ 3

降级

I am working on an Angular 6.0.7 application with Webpack 4.15.1. The application runs great when using the webpack-dev-server, but once I try to build it using production mode, it fails at the HtmlWebpackPlugin emitting stage.

It must have something to do with HtmlWebpackPlugin because if I remove the plugin then the javascript files generate without a problem. It may have to do with the number of generated chunks.

This did not happen until I added two new routes to my application. Once I remove any two routes, the application compiles fine. Here is the error:

> 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)

I tried to create a small runnable example but could not replicate the issue. Here is the repository when it compiles and when it does not. The relevant commit after which this issue appeared is found here.

Thanks for any suggestions. I've been debugging this all day.

解决方案

I came across the same issue some days ago. I found 3 possible fixes.

1. Reset chunksSortMode

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

2. Update html-webpack-plugin

   • npm i --save-dev html-webpack-plugin@next
   • In the latest version they removed toposort (the lib that causing the error)

3. Fix circular dependencies

   • Install circular-dependency-plugin
   • Run webpack without html-webpack-plugin
   • Try to fix if possible, the circular dependencies that the plugin reports

Also I realised that the latest version of mocha-webpack has the same issue due to toposort in that case the only solution for me was to downgrade webpack@3

这篇关于具有多个角度路线的循环依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！