Skip to content

chore(deps): update nx to v21.2.0 & angular to v20.0.3 #1875

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 12 commits into from
Jul 14, 2025
Merged

chore(deps): update nx to v21.2.0 & angular to v20.0.3 #1875

merged 12 commits into from
Jul 14, 2025

Conversation

gestj
Copy link
Contributor

@gestj gestj commented Jun 17, 2025 •
edited
Loading

We also can't update to Angular 20 because of rx-angular staying behind.

So, I started this branch & rather big update. The 20 update is painful. Its big with many changes for big / complex projects. We also suffer in our project.

I hoped I could make it work for rx-angular which is less complex than ours.
But sadly, it isn't that easy in this project as well.

I of course struggle with the tiny details since I am not used to behind-the-scenes coding tightly coupled to deep nasty details of Angular framework.

This failing test in stopped my approach for now.

libs/template/unpatch/src/lib/tests/unpatch.directive.spec.ts

BUT; Maybe you can make use of it if you consider an Angular 20 update.

PLEASE; Take over. I won't be able to successfully make this ready for merge.

Maybe, what did I do?

yarn nx migrate latest
# After this I changed package.json > engines > node; Cause 18.13 isn't supported anymore by Angular 20; https://angular.dev/reference/versions
yarn
yarn nx migrate --run-migrations # during this you'll run into this: https://github.com/nrwl/nx/issues/20172#issuecomment-1825783434; But I could verify (with temporary local additional changes that the failed migrations aren't needed for this codebase)

The migrations of NX & Angular will change a LOT of files. E.g. the template changes where ngIf, ngFor, ngSwitch get replaced by their control flow counter parts. Others are config changes by NX migrations.

After that:

  • I disabled @angular-eslint/prefer-inject where needed (and in one place I fixed the issue since it was only one spec file).
  • I fixed the broken test-setup.ts files (the way jest-preset-angular works changed with 14.6.0)
  • I fixed broken effect setup in toObservableMicrotask since API change due to fix(core): remove forceRoot flag for effects angular/angular#60535 (part of Angular 20)
  • Very nasty change => in zone-config.spec.ts you patch Zone in window; This broke. I disabled (commented) the related beforeAll & afterAll. I had this idea after I saw how tests are written. I asked myself why the hell is this needed in first place, I bet it works without it. And yes, the tests run with out it. But, I can't judge it since I don't know the code by heart....

@github-actions github-actions bot added </> Template @rx-angular/template related { } State @rx-angular/state related 🔬 Experimental Experimental: Feature, docs, demos 🚀 ISR 🛂 Test Unit tests, e2e tests, integration tests, test coverage 🛠️ CDK CDK related labels Jun 17, 2025
@gestj gestj mentioned this pull request Jun 17, 2025
Closed
hoebbelsB
hoebbelsB reviewed Jun 19, 2025
View reviewed changes
hoebbelsB
hoebbelsB reviewed Jun 19, 2025
View reviewed changes
@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Jun 19, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 7804f72

Command Status Duration Result
nx affected -t lint build test component-test e... ✅ Succeeded 4m 7s View ↗
nx build docs ✅ Succeeded 1m 17s View ↗
nx-cloud record -- npx nx format:check ✅ Succeeded 3s View ↗

☁️ Nx Cloud last updated this comment at 2025-07-14 21:15:18 UTC

@hoebbelsB
Copy link
Member

hey @gestj thank u so much for this huge contribution <3 !

I was working on that already for a while, but didn't find time to finalize it, the current state is here #1876

I see that you put a lot of effort into this one, so I want to merge your PR over mine. Can u solve the remaining comments? I'm going to merge your PR then when pipeline succeeds and do the additional changes in a new PR.

@hoebbelsB hoebbelsB requested a review from eneajaho June 19, 2025 14:34
@hoebbelsB
Copy link
Member

the demo build is failing https://cloud.nx.app/runs/PxeR6ftRdG/task/demos%3Abuild%3Aproduction

it's just a couple of minor changes. Do you want to take care of them?

@eneajaho eneajaho self-assigned this Jun 19, 2025
@eneajaho
Copy link
Member

Also related: #1877

@gestj
Copy link
Contributor Author

gestj commented Jun 22, 2025 •
edited
Loading

Heyho, thanks for taking over.

I am currently off due to private issues, I didn't see your comments until now.
But, it looks like you managed some more progress meanwhile. 👍🏻

Still not ready. I had a look on failing test (https://cloud.nx.app/runs/RKoxUB9h0R/task/template%3Atest). I think I found a valid fix for that one.

@gestj
Copy link
Contributor Author

gestj commented Jun 22, 2025

the demo build is failing https://cloud.nx.app/runs/PxeR6ftRdG/task/demos%3Abuild%3Aproduction

it's just a couple of minor changes. Do you want to take care of them?

This one seems to be resolved as well by changes from @eneajaho. Command runs successfully localy.

@gestj
test: Fix `NG0204: Can't resolve all parameters for TemplateRef: (?, …
135801e 
…?, ?)

https://cloud.nx.app/runs/RKoxUB9h0R/task/template%3Atest

From all I know, it isn't needed to provide core Angular "providers" unless you want to explicitly overwrite it with some custom implementation.
@gestj
Copy link
Contributor Author

gestj commented Jun 22, 2025

Some other thing.

When I run locally

yarn format:write --alll

I get a big chunk of changes. Is the project in some corrupt formatted state? (I won't push this change)

@hoebbelsB hoebbelsB marked this pull request as ready for review July 13, 2025 19:08
@hoebbelsB
Copy link
Member

FINALLY, the main pipeline is green.

@github-actions github-actions bot added the 📚 Docs Web Documentation hosted on github pages label Jul 13, 2025
@hoebbelsB hoebbelsB merged commit 550aa59 into rx-angular:main Jul 14, 2025
6 checks passed
@hoebbelsB hoebbelsB mentioned this pull request Jul 14, 2025
Closed
@denisyilmaz denisyilmaz mentioned this pull request Jul 17, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@hoebbelsB hoebbelsB hoebbelsB left review comments

@eneajaho eneajaho eneajaho left review comments

Assignees

@eneajaho eneajaho

Labels
🛠️ CDK CDK related 📚 Docs Web Documentation hosted on github pages 🔬 Experimental Experimental: Feature, docs, demos 🚀 ISR { } State @rx-angular/state related </> Template @rx-angular/template related 🛂 Test Unit tests, e2e tests, integration tests, test coverage
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@gestj @hoebbelsB @eneajaho