We are trying to migrate from angular 8 to angular 11 and we are now encountering issues with webpack-manifest-plugin.
Here is what is generated in the manifest with ng11 when building without watch mode :
[webpack 4.39, webpack-manifest-plugin 2.2.0]
{
"main.js": "hybrid/main.js",
"main.js.map": "hybrid/main.js.map",
"polyfills.js": "hybrid/polyfills.js",
"polyfills.js.map": "hybrid/polyfills.js.map",
"polyfills-es5.js": "hybrid/polyfills-es5.js",
"polyfills-es5.js.map": "hybrid/polyfills-es5.js.map",
"runtime.js": "hybrid/runtime.js",
"runtime.js.map": "hybrid/runtime.js.map",
"styles.css": "hybrid/styles.css",
"styles.css.map": "hybrid/styles.css.map",
"vendor.js": "hybrid/vendor.js",
"vendor.js.map": "hybrid/vendor.js.map"
}
Here is an extract of the result we should have (it is the result we get with ng11/watch mode and with ng8 with or without watch mode)
[ webpack 4.44, webpack-manifest-plugin 2.2.0 or v3 or v4 ]
{
"main.js": "hybrid/main.js",
"main.js.map": "hybrid/main.js.map",
"polyfills.js": "hybrid/polyfills.js",
"polyfills.js.map": "hybrid/polyfills.js.map",
"polyfills-es5.js": "hybrid/polyfills-es5.js",
"polyfills-es5.js.map": "hybrid/polyfills-es5.js.map",
"runtime.js": "hybrid/runtime.js",
"runtime.js.map": "hybrid/runtime.js.map",
"styles.css": "hybrid/styles.css",
"styles.css.map": "hybrid/styles.css.map",
"vendor.js": "hybrid/vendor.js",
"vendor.js.map": "hybrid/vendor.js.map"
"assets/css/buttons.scss": "hybrid/assets/css/buttons.scss",
"assets/css/formio.scss": "hybrid/assets/css/formio.scss",
"assets/css/loader.scss": "hybrid/assets/css/loader.scss",
"assets/css/status.scss": "hybrid/assets/css/status.scss",
"assets/css/tooltip.scss": "hybrid/assets/css/tooltip.scss",
"assets/fonts/Bariol-Bold.otf": "hybrid/assets/fonts/Bariol-Bold.otf",
"assets/fonts/Bariol.otf": "hybrid/assets/fonts/Bariol.otf"
}
All of our assets are excluded from the manifest when not using watch mode, but we can't use this mode for production so we are a bit stuck right now.
We tried to use newer versions of webpack-manifest-plugin. (Our configuration of the manifest plugin didn't change when migrating and is very simple with just fileName and publicPath parameters.)
We also tried to force other webpack versions using 'npx npm-force-resolutions' with no luck.
It works as expected with the configuration 'ng10 + @angular-devkit/build-angular v0.1000.0 + webpack 4.43 + webpack-manifest-plugin 3.0' but the issue is happening as soon as webpack 4.44 arrives in the next minor version of @angular-devkit.
We can't migrate to ng12+ to check if the issue is fixed since we are using angular-hybrid which is only supporting ng11.
Any idea will be very welcomed as we tried all possible combinations of versions.