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

Solution 1:

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

• 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

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

Solution 2:

The problem was apparently caused by html-webpack-plugin getting into some kind of loop with chunksSortMode: 'dependency', so instead I sorted manually as so:

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