Angular-builders: Add Experimental Webpack 5 Support

[xiaoxiangmoe]

There is an experimental support for Webpack v5 in the Angular CLI by https://github.com/angular/angular-cli/pull/18820, and it was released in 11.0.0-next.3

Can you add support for webpack v5 in @angular-builders/custom-webpack ?

Thank you very much!

[just-jeb]

Hey @xiaoxiangmoe,
The latest version of this builder is to be used with Angular 10, most probably it won't work with Angular 11.
We need to wait till Angular 11 is out and then release it with a new version of @angular-builders.
That being said, even then the support is not promised. @angular-builders use webpack-merge for merging the configs and it seems that it doesn't have official support for Webpack 5 yet.

[ydmitry]

@just-jeb
Hello, I did a PoC maybe a month ago, with Angular CLI fork (it is released now), with custom webpack builder and webpack 5 with module federation. Everything worked for me, just was need to do 1-3 changes in webpack custom builder. Can create a PR

[BenRacicot]

@ydmitry Awesome stuff! I'd love to see what you did and how you did it.
I just setup a 11.0.0-next.5 project and am hoping to dig into module federation. Any guidance you may have would be so very appreciated.

[just-jeb]

@ydmitry Hey, PRs are always welcome. Not sure it will be very helpful now, since current builder version explicitly depends on Angular Devkit 10, but it for sure will be a highly demanded feature in v11.

[ydmitry]

OK, will try to do this weekends, actually it works with Angular in host mode (checked in another project). I assume need to fix "remote" mode

[ydmitry]

Created a demo, everything is works when add "resolutions". Upgrading peerDependencies in custom webpack builder might be helpful, no need to other code changes on lib side.

Here is the demo:
https://github.com/ydmitry/angular11-webpack-module-federation-custom-webpack-builder

Had to add following resolutions:

"resolutions": {
    "webpack": "5.4.0",
    "@angular-devkit/build-angular": "0.1100.0-rc.2",
    "@angular-devkit/architect": "0.1100.0-rc.2",
    "@angular-devkit/core": "11.0.0-rc.2",
    "webpack-cli": "4.0.0"
  }

webpack-merge has breaking changes in v5, but current v4 works with webpack5 well.

[qortex]

Had to add following resolutions:

"resolutions": {
    "webpack": "5.4.0",
    "@angular-devkit/build-angular": "0.1100.0-rc.2",
    "@angular-devkit/architect": "0.1100.0-rc.2",
    "@angular-devkit/core": "11.0.0-rc.2",
    "webpack-cli": "4.0.0"
  }

Tried your code, but got an error at ng serve:

An unhandled exception occurred: Cannot find module 'webpack/lib/dependencies/ImportDependenciesBlock'
Require stack:
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/named-chunks-plugin.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/webpack.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/index.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular/src/browser/index.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular/src/index.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-builders/custom-webpack/dist/dev-server/index.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-devkit/architect/node/index.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular/cli/models/architect-command.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular/cli/commands/serve-impl.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular-devkit/schematics/tools/index.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular/cli/utilities/json-schema.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular/cli/models/command-runner.js
- /home/mic/dev/qontrol/product/frontend/node_modules/@angular/cli/lib/cli/index.js
- /usr/lib/node_modules/@angular/cli/lib/init.js
- /usr/lib/node_modules/@angular/cli/bin/ng

[ydmitry]

@qortex /home/mic/dev/qontrol/product/frontend/node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/named-chunks-plugin.js this means that you have @angular-devkit/build-angular inside custom-webpack, so resolution didn't work on npm/yarn level . Are you using yarn ?

[qortex]

Yes I'm using yarn. Although I basically just use it, do not know much about the details :/

[toverux]

You may have to delete node_modules and execute yarn again. Even if your dependencies tree is flattened due to resolutions, I'm not sure that yarn cleans up older versions of the dependency, and then the node resolution algorithm gets in the way.
Also you may use yarn why <package name> to check why a package is installed multiple times (here it should be okay though).

[qortex]

Ah makes sense. Now I get:

[error] TypeError: Cannot destructure property 'bold' of 'core_1.terminal' as it is undefined.
    at Object.<anonymous> (/home/mic/dev/qontrol/product/frontend/node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/stats.js:15:9)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
    at Module.load (internal/modules/cjs/loader.js:1049:32)
    at Function.Module._load (internal/modules/cjs/loader.js:937:14)
    at Module.require (internal/modules/cjs/loader.js:1089:19)
    at require (internal/modules/cjs/helpers.js:73:18)
    at Object.<anonymous> (/home/mic/dev/qontrol/product/frontend/node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular/src/angular-cli-files/utilities/bundle-calculator.js:5:17)
    at Module._compile (internal/modules/cjs/loader.js:1200:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)

My packages.json:

"resolutions": {
    "webpack": "^5.0.0",
    "@angular-devkit/architect": "~0.1100.1",
    "@angular-devkit/core": "^11.0.0",
    "webpack-cli": "^4.2.0"
  },

(removed @angular-devkit/build-angular as I already have "@angular-devkit/build-angular": "~0.1100.1" in the devDependencies).

[ydmitry]

(removed @angular-devkit/build-angular as I already have "@angular-devkit/build-angular": "~0.1100.1" in the devDependencies).

This shouldn't removed from resolutions. Resolutions allows not to load two different versions of dependencies. So you have:

1. node_modules/@angular-devkit/build-angular
2. node_modules/@angular-builders/custom-webpack/node_modules/@angular-devkit/build-angular

You can remove second manually and see that it builds or error will be changed (if you need to resolve more dependencies)

[qortex]

Indeed, works well! Thanks for the explanations.

[just-jeb]

Latest version has been updated to the latest Angular deps. Can this issue be closed?

[ydmitry]

Yes, updated example, works fine: https://github.com/ydmitry/angular11-webpack-module-federation-custom-webpack-builder/blob/main/package.json#L31

[qortex]

I have this issue with graphql-tag, any idea where to look for a solution? Is it related to angular-builders ?
https://github.com/apollographql/graphql-tag/issues/326

[ydmitry]

@qortex the same warning was earlier for sass-loader (or another styles-related loader), I think something was updated on loaders side and issue was resolved

[ydmitry]

Maybe related to circular plugin https://github.com/aackerman/circular-dependency-plugin/issues/60

[qortex]

Awesome, upgrading circular-dependency-plugin to 5.2.2 fixes the warning. So I added this to resolutions:

"circular-dependency-plugin": "^5.2.2"