Add Experimental Webpack 5 Support #841

xiaoxiangmoe · 2020-09-24T03:47:17Z

There is an experimental support for Webpack v5 in the Angular CLI by angular/angular-cli#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 · 2020-10-02T18:43:07Z

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 · 2020-10-03T14:12:35Z

@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 · 2020-10-14T15:06:06Z

@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 · 2020-10-20T06:56:15Z

@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 · 2020-11-04T11:28:28Z

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 · 2020-11-08T18:41:03Z

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 · 2020-11-13T10:50:02Z

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 · 2020-11-13T11:57:16Z

@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 · 2020-11-13T13:00:10Z

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

toverux · 2020-11-13T14:02:00Z

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 · 2020-11-13T14:22:06Z

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 · 2020-11-13T14:44:09Z

(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:

node_modules/@angular-devkit/build-angular
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 · 2020-11-13T15:29:16Z

Indeed, works well! Thanks for the explanations.

just-jeb · 2020-11-19T13:07:43Z

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

ydmitry · 2020-11-19T15:29:16Z

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

qortex · 2020-11-23T10:27:29Z

I have this issue with graphql-tag, any idea where to look for a solution? Is it related to angular-builders ?
apollographql/graphql-tag#326

ydmitry · 2020-11-23T11:50:54Z

@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 · 2020-11-23T12:02:11Z

Maybe related to circular plugin aackerman/circular-dependency-plugin#60

qortex · 2020-11-23T13:59:22Z

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

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

See also: - just-jeb/angular-builders#841

just-jeb added the enhancement New feature or request label Oct 2, 2020

just-jeb added the pr-welcome label Oct 20, 2020

ydmitry mentioned this issue Nov 8, 2020

feat(webpack5): simplify dependencies resolution when opt-in #853

Closed

2 tasks

just-jeb closed this as completed Dec 27, 2020

qortex mentioned this issue Jan 4, 2021

Webpack 5 & false circular dependency warning apollographql/graphql-tag#326

Closed

Tcharl mentioned this issue Jan 14, 2021

Upgrade to webpack 5 jhipster/generator-jhipster#12712

Closed

1 task

tony added a commit to tony/cv that referenced this issue Jan 24, 2021

angular: More package tweaks to try to salvage webpack v5 resolutions

91c4df1

See also: - just-jeb/angular-builders#841

denniskigen mentioned this issue May 22, 2023

(fix) Setup esm-form-entry to use webpack module federation openmrs/openmrs-esm-patient-chart#1168

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Experimental Webpack 5 Support #841

Add Experimental Webpack 5 Support #841

xiaoxiangmoe commented Sep 24, 2020 •

edited

Loading

just-jeb commented Oct 2, 2020

ydmitry commented Oct 3, 2020 •

edited

Loading

BenRacicot commented Oct 14, 2020

just-jeb commented Oct 20, 2020

ydmitry commented Nov 4, 2020 •

edited

Loading

ydmitry commented Nov 8, 2020 •

edited

Loading

qortex commented Nov 13, 2020

ydmitry commented Nov 13, 2020

qortex commented Nov 13, 2020

toverux commented Nov 13, 2020

qortex commented Nov 13, 2020

ydmitry commented Nov 13, 2020

qortex commented Nov 13, 2020

just-jeb commented Nov 19, 2020

ydmitry commented Nov 19, 2020

qortex commented Nov 23, 2020

ydmitry commented Nov 23, 2020

ydmitry commented Nov 23, 2020

qortex commented Nov 23, 2020

Add Experimental Webpack 5 Support #841

Add Experimental Webpack 5 Support #841

Comments

xiaoxiangmoe commented Sep 24, 2020 • edited Loading

just-jeb commented Oct 2, 2020

ydmitry commented Oct 3, 2020 • edited Loading

BenRacicot commented Oct 14, 2020

just-jeb commented Oct 20, 2020

ydmitry commented Nov 4, 2020 • edited Loading

ydmitry commented Nov 8, 2020 • edited Loading

qortex commented Nov 13, 2020

ydmitry commented Nov 13, 2020

qortex commented Nov 13, 2020

toverux commented Nov 13, 2020

qortex commented Nov 13, 2020

ydmitry commented Nov 13, 2020

qortex commented Nov 13, 2020

just-jeb commented Nov 19, 2020

ydmitry commented Nov 19, 2020

qortex commented Nov 23, 2020

ydmitry commented Nov 23, 2020

ydmitry commented Nov 23, 2020

qortex commented Nov 23, 2020

xiaoxiangmoe commented Sep 24, 2020 •

edited

Loading

ydmitry commented Oct 3, 2020 •

edited

Loading

ydmitry commented Nov 4, 2020 •

edited

Loading

ydmitry commented Nov 8, 2020 •

edited

Loading