Angular-builders: Support Angular v10

[qortex]

After migrating to Angular v10:

warning "@angular-builders/custom-webpack > @angular-devkit/[email protected]" has incorrect peer dependency "@angular/compiler-cli@>=9.0.0 < 10".
warning "@angular-builders/custom-webpack > @angular-devkit/[email protected]" has incorrect peer dependency "typescript@>=3.6 < 3.9".
warning "@angular-builders/custom-webpack > @angular-devkit/build-angular > @ngtools/[email protected]" has incorrect peer dependency "@angular/compiler-cli@>=9.0.0 < 10".
warning "@angular-builders/custom-webpack > @angular-devkit/build-angular > @ngtools/[email protected]" has incorrect peer dependency "typescript@>=3.6 < 3.9".

[KrakenTyio]

Main issue is @ngtools/webpack should use parent project @ngtools/webpack deps when is present

I upgrade all my deps to ~10
but custom-webpack use his own old ~9 and raise *.ngtypecheck.ts warning for typechecking

quickfix for users
after npm remove node_modules/@angular-builders/custom-webpack/node_modules/@ngtools dir and also @angular-devkit then set it to your own package.json and devdeps

[qortex]

Ah! I am indeed hitting the *.ngtypecheck.ts warnings :(
Thanks for making it clear.

So are you saying that the warnings will disappear when package updates to Angular v10?

[KrakenTyio]

@qortex yes, this poackage has not hitted deps from parrent so its create his local node_modules targeting verzion ~9

i put to my package.json temporary

"postinstall": "cd node_modules/@angular-builders/custom-webpack/node_modules && rm -rf @ngtools && rm -rf @angular-devkit"
.....
devDeps:
"@angular-devkit/build-angular": "~0.1000.0",
"@ngtools/webpack": "~10.0.0",

and app work well

tested on big app with 400chunks

[qortex]

Ok I see, thanks.

So I guess the fix would involve updating this file to new dependencies: https://github.com/just-jeb/angular-builders/blob/master/packages/custom-webpack/package.json

[qortex]

Ho but I see it's already on the way: https://github.com/just-jeb/angular-builders/pull/782
Thanks @just-jeb !

[just-jeb]

You guys are fast

[just-jeb]

You're welcome to try the latest beta 10.0.0-beta.0 and let me now if there are any issues in migration.

[qortex]

I confirm it works fine in my setup. Thanks for the very quick patch!

[KrakenTyio]

work like a charm

[piotrroda]

After update to 10.0.0-beta.0 I see an error:

An unhandled exception occurred: Cannot find module 'webpack'
Require stack:
- C:\SLS_EB\Claims\Angular\node_modules\webpack-dev-server\lib\Server.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\build-webpack\src\webpack-dev-server\index.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\build-webpack\src\index.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular-devkit\build-angular\src\browser\index.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular-devkit\build-angular\src\index.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular-builders\custom-webpack\dist\browser\index.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\index.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular\cli\models\architect-command.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular\cli\commands\build-impl.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular-devkit\schematics\tools\export-ref.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular-devkit\schematics\tools\index.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular\cli\utilities\json-schema.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular\cli\models\command-runner.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular\cli\lib\cli\index.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular\cli\lib\init.js
- C:\SLS_EB\Claims\Angular\node_modules\@angular\cli\bin\ng

[lhargil]

You're welcome to try the latest beta 10.0.0-beta.0 and let me now if there are any issues in migration.

I encountered a Cannot find module webpack after rebuilding my app using the beta version. A quick npm link webpack command fixed it.

I confirm that the fix specified in the beta works to address the warnings.

Thank you very much ! :)

[qortex]

But now my Heroku builds don't pass anymore :(
That's weird since they pass fine on my machine with the same arguments. I get:

-----> Build
       Running build (yarn)
       yarn run v1.22.4
       $ ng build -c=$ENV_PIPELINE --aot --build-optimizer --optimization --verbose
    WARNING: Zone.js does not support native async/await in ES2017.
    These blocks are not intercepted by zone.js and will not triggering change detection.
    See: https://github.com/angular/zone.js/pull/1140 for more information.
[...]
Compiling ngx-webstorage-service : es2015 as esm2015

and then nothing, and it times out.
I can't get more info it seems.

Any idea why that would be happening, or a way to debug?

[just-jeb]

@piotrroda did you try clean install? Removing node modules and etc.? @lhargil same question.
@qortex tbh no idea. Maybe you have something cached on build agent? Can you reproduce this error without custom-webpack? Sounds like Angular issue.

[lhargil]

@piotrroda did you try clean install? Removing node modules and etc.? @lhargil same question.

Yes i did a clean install after updating to the beta. As mentioned, the npm link webpack command solved the Cannot find module 'webpack' :)

[KrakenTyio]

Also can confirm on my CI, with beta deps halting with "cannot find module webpack" as is mention above

[just-jeb]

Do you have package-lock.json/yarn.lock? If yes, try removing it and regenerating.

[inpercima]

I had the same problem but I can confirm with version 10.0.0-beta.0 the warning problem is fixed. Thanks. :+1:

[qortex]

Turns out it's an "out-of-memory" on my heroku builder.
I'll look into debugging it, don't know if it's related to angular-builders or not. (Hard for me to disable angular-builders since I use to compile *.graphql files).

[qortex]

Alright, the memory issue turned out to be a (very much!) non-trivial bug in copy-webpack-plugin. It is tracked here: https://github.com/angular/angular-cli/issues/18087#issuecomment-651955280

It appears only if differential loading is disabled ans was actually already there in v9.

A patch will be released upstream.

Note: during the investigation, the Angular team member saw that my builds involve what seems to be a lot of webpack compilations (121). Any tip on if it's normal or due to a misconfig of angular-builders on my part would be appreaciated :)

[danmana]

I had the same issue with Cannot find module webpack after upgrading.
I didn't want to run npm link webpack especially on the build server.

What I ended up doing (and worked) was:

npm uninstall --save-dev @angular-builders/custom-webpack
rm -rf package-lock.json
rm -rf node_modules
rm -rf dist # this seems to be important for some reason, I tried the same steps without this before and it didn't work ...
npm install
npm install --save-dev @angular-builders/[email protected]

I can't say for sure this will work on the first try, as I did some of the steps multiple times, but eventually, it worked without npm link.

[benelliott]

Inspired by @danmana's message, wiping node_modules and package-lock.json then running npm i was enough to fix the webpack resolution error for me.

[rweng]

I needed to update to "@angular-devkit/build-angular": "~0.1000.0",. Also regenerated package-lock.json.

[hudzenko]

Any news about v10 stable release?

[just-jeb]

Just published.

[lhargil]

Just published.

Thank you @just-jeb ! :)

[zuzusik]

To Cannot find module webpack issue.

The alternative solution which worked for me was uninstalling @angular-builders/custom-webpack prior to upgrading to Angular 10 and then after upgrading to Angular 10 - installing it again.

Note: Removing package-lock.json as suggested above might be quite a bold move as that would implicitly update application dependencies to the latest versions allowed by package.json, where the whole purpose of package-lock.json is to avoid such implicit updates.