Cyclic dependency with more than one Angular route

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.

Solution

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

Reset chunksSortMode

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

Update html-webpack-plugin

Update html-webpack-plugin to v4.0.0 or newer because toposort was removed in v4.0.0. In addition, you can check that in the dependencies for v4.0.0

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