just-jeb
@angular/build not yet compatible with angular v20
Describe the Bug
After updating Angular to version 20 following the NX Automate Updating Dependencies Guide starting an web application with nx serve doesn't work anymore:
Error: The current version of "@angular/build" supports Angular versions ^19.0.0 || ^19.2.0-next.0,
but detected Angular version 20.0.7 instead.
Minimal Reproduction
- Create a Angular Project
- Upgrade Angular to version 20 using NX Automate Updating Dependencies Guide
- run angular project using
nx serve
Expected Behavior
@angular-builders/custom-webpack supports Angular version 20.
Screenshots
Environment
Libs
- @angular/core version: 20.07
- @angular-devkit/build-angular version: 20.0.6
- @angular-builders/custom-webpack version: 19.0.1
- @nx/angular version: 21.2.3
For Tooling issues:
- Node version: 22.11.0
- yarn version: 1.22.22
- Platform: Mac
Others:
- IDE: IntelliJ IDEA 2025.1.3 (Ultimate Edition)
Additional Context
npx nx migrate latest upgrades @angular-builders/custom-webpack to version 19.0.1 which does not support Angular version 20. There is a newer version of @angular-builders/custom-webpack (version 20.0.0) available. However, manually upgrading to this version leads to even more complex errors:
NX Directory import 'node_modules/@angular-builders/custom-webpack/dist/dev-server' is not supported resolving
ES modules imported from node_modules/nx/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
I'm happy to answer any upcoming questions. Cheers.
@TimoFeucht
I ran into a similar issue with my web project. While my local build worked with Node.js 22.17.0, the build on Cloudflare failed with Node.js 22.18.x.
After I forced Cloudflare to use Node.js 22.17.0, the build was successful. I'm not sure why the newer version is causing the build to fail, but hopefully, this information helps.
I have the same issues with @angular-builders/jest, the latest version currently available is v20.0.0 (3 months ago).
However, I want to upgrade to typescript v5.9.2 and use Angular v20.3.2. However, I notice that your @angular-builders/[email protected] has dependencies with:
'@angular-devkit/build-angular': 19.2.13`
WHY!? That is wrong old version. Or maybe it is just me.
You should depend on v20.3.2 (or at least 20.x.x or higher). Right?
This is what pnpm-lock.yaml generates for me:
'@angular-builders/[email protected](74dd0fdea3c9be3dd66c5dec1a239e26)':
dependencies:
'@angular-builders/common': 4.0.0(@swc/[email protected](@swc/[email protected]))(@types/[email protected])([email protected])([email protected])
'@angular-devkit/architect': 0.2003.2([email protected])
'@angular-devkit/build-angular': 19.2.13(@angular/[email protected](@angular/[email protected])([email protected]))(@angular/[email protected])(@angular/[email protected](@angular/[email protected](@angular/[email protected])([email protected]))(@angular/[email protected]))(@swc/[email protected](@swc/[email protected]))(@types/[email protected])([email protected])([email protected])([email protected](@types/[email protected])([email protected](@swc/[email protected](@swc/[email protected]))(@types/[email protected])([email protected])))([email protected])([email protected])([email protected](@types/[email protected])([email protected])([email protected])([email protected])([email protected])([email protected]))([email protected])
'@angular-devkit/core': 20.3.2([email protected])
'@angular/compiler-cli': 20.3.1(@angular/[email protected])([email protected])
'@angular/core': 20.3.1(@angular/[email protected])([email protected])([email protected])
'@angular/platform-browser-dynamic': 20.3.1(@angular/[email protected](@angular/[email protected](@angular/[email protected])([email protected])([email protected]))([email protected]))(@angular/[email protected])(@angular/[email protected](@angular/[email protected])([email protected])([email protected]))(@angular/[email protected](@angular/[email protected](@angular/[email protected](@angular/[email protected])([email protected])([email protected])))(@angular/[email protected](@angular/[email protected](@angular/[email protected])([email protected])([email protected]))([email protected]))(@angular/[email protected](@angular/[email protected])([email protected])([email protected])))
jest: 30.1.3(@types/[email protected])([email protected](@swc/[email protected](@swc/[email protected]))(@types/[email protected])([email protected]))
jest-preset-angular: 14.6.0(@angular/[email protected](@angular/[email protected])([email protected]))(@angular/[email protected](@angular/[email protected])([email protected])([email protected]))(@angular/[email protected](@angular/[email protected](@angular/[email protected](@angular/[email protected])([email protected])([email protected]))([email protected]))(@angular/[email protected])(@angular/[email protected](@angular/[email protected])([email protected])([email protected]))(@angular/[email protected](@angular/[email protected](@angular/[email protected](@angular/[email protected])([email protected])([email protected])))(@angular/[email protected](@angular/[email protected](@angular/[email protected])([email protected])([email protected]))([email protected]))(@angular/[email protected](@angular/[email protected])([email protected])([email protected]))))(@babel/[email protected])(@jest/[email protected])(@jest/[email protected])([email protected](@babel/[email protected]))([email protected](@types/[email protected])([email protected](@swc/[email protected](@swc/[email protected]))(@types/[email protected])([email protected])))([email protected])([email protected])
lodash: 4.17.21
Hence the errors I get 😢 :
apps/frontend
├─┬ @angular-devkit/build-angular 19.2.13
│ ├── ✕ unmet peer typescript@">=5.5 <5.9": found 5.9.2
│ ├── ✕ unmet peer @angular/localize@"^19.0.0 || ^19.2.0-next.0": found 20.3.1
│ ├── ✕ unmet peer @angular/compiler-cli@"^19.0.0 || ^19.2.0-next.0": found 20.3.1
│ ├── ✕ unmet peer jest@^29.5.0: found 30.1.3
│ ├─┬ @angular/build 19.2.13
│ │ ├── ✕ unmet peer typescript@">=5.5 <5.9": found 5.9.2
│ │ ├── ✕ unmet peer @angular/compiler@"^19.0.0 || ^19.2.0-next.0": found 20.3.1
│ │ ├── ✕ unmet peer @angular/localize@"^19.0.0 || ^19.2.0-next.0": found 20.3.1
│ │ └── ✕ unmet peer @angular/compiler-cli@"^19.0.0 || ^19.2.0-next.0": found 20.3.1
│ ├─┬ @ngtools/webpack 19.2.13
Again, I just want to use Angular 20.3.x together with the support TS version v5.9.x (like v5.9.2).
Libs
- @angular/core version: 20.07
- @angular-devkit/build-angular version: 20.0.6
- @angular-builders/custom-webpack version: 19.0.1
- @nx/angular version: 21.2.3
@TimoFeucht You need to use @angular-builders/custom-webpack@20
@melroy89 Jest builder v20 depends on build-angular@20. I assume a problem with your pnpm lock, but for the benefit of doubt please check what's in Jest Builder's package.json in your node_modules 🙏.
yeah.. my bad.. I blame pnpm within a monorepo. After running the official angular cli to upgrade from v19 to v20, for some reason pnpm install complains about these "unmet peer" bs messages.
However, removing the node_modules and doing a clean install, you will not get these warnings at all. Maybe its just me, but I think pnpm is not fully updating all node_modules across the monorepo correctly.
EDIT: Yes. I have v20 in my package.json file: "@angular-builders/jest": "^20.0.0",
yeah.. my bad.. I blame
pnpmwithin a monorepo. After running the official angular cli to upgrade from v19 to v20, for some reasonpnpm installcomplains about these "unmet peer" bs messages.However, removing the
node_modulesand doing a clean install, you will not get these warnings at all. Maybe its just me, but I thinkpnpmis not fully updating allnode_modulesacross the monorepo correctly.EDIT: Yes. I have v20 in my
package.jsonfile:"@angular-builders/jest": "^20.0.0",
Nailed it.. I think its because I also have common "packages" in a packages directory. With are like shared js files or shared config files. For some reason I also have pnpm deps defined in those package.json files, which might conflict with my apps in the monorepo.. Anyway, its my bad.
Sorry, it's me again. One last update.. So the following two "unmet peer" warnings where actually valid:
apps/frontend
├─┬ @angular-devkit/build-angular 20.3.3
│ └── ✕ unmet peer jest@^29.5.0: found 30.2.0
└─┬ @angular-builders/jest 20.0.0
└─┬ jest-preset-angular 14.6.0
└── ✕ unmet peer jest@^29.0.0: found 30.2.0
The problem is simple, it seems that the latest @angular-devkit/build-angular is actually not supporting Jest v30 but only v29. Related to: https://github.com/just-jeb/angular-builders/issues/1931
And the reverse is true for the latest version of jest-preset-angular (v15), which is expecting Jest v30, but that is not possible since build-angular only supports v29. I dunno maybe I shouldn't have added jest-preset-angular to the package.json to begin with.. Ow well..