I updated my angular app from 20.3.6 to 21.0.0.
It broke the DOM update on data change. I have to revert the update and stay on 20.3.6.
Basically my app has public static variables outside components to store data requested to the backend (so, no re-call the backend on app normal navigation) → use GETTERS → DOM.
It think is very normal and expected usage from Angular, it is not the purpose of angular to automatically update DOM on data changes?.
As the npm audit was throwing risks in packages…, I decided to update to angular 21.
How a fundamiental behaviour of angular can change just jumping from v20 to v21, it is just me?
I had 2 days trying to fix it with AI asistant, nothing of the “known” tricks worked. The DOM simply don’t update anymore on data change, it breaks the spirit of Angular itself!.
QUESTION:
What is supposed to be done if getters don’t work anymore for DOM impact on data changes? What is the new normal?
Its been years since I’ve used Angular.
The main “selling point” of Angular V21 is the removal of zonejs, which has been long time coming, and finally the default from what I can tell.
At a glance it sounds like your usecase did rely on zonejs to understand change detection automatically. This of course is how Angular has handled change detection for a while. The main issue with it has been performance, and debugging, since its essentially magically checks if something behind the scene changes continuously, rather than a more “opt in” to change detection route that has been the main goal for improved performance.
I’d checkout the docs on zonejs/zoneless change detection to either revert this behavior by opting back into it, or how to change your app to no longer rely on zonejs.
refs (randomly pulled off google): Zoneless • Angular
Yes, now I see, it is a complete nightmare.
Now it has to tell, “-hey, there can be changes”, so, is required to rework every component, and inserting ChangeDetectorRef.markForCheck() , in every async suscribe() where it can change values of underlying data, in every Element Event that is able to change a variable, hugely bloating the code.
So, for large projects the Angular 21 and later will be a NO-NO!. They could do it optional (changes disabled by default), but not.
And all tricks, let say, ok, you want to use angular 21 core (for some others reasons), but lets include zoneJS, and continue using zones nothing worked, like , include all suggested by IA (like zoneless = false, etc.), nothing worked.
So, I fully updated v20, without going v21, 2 complete days lost in troubleshooting. “20.3.11”.
I’d plan out a migration path (single line in every manual subscribe sounds like an “ai job”) if you want to keep pace with the releases, or just stick with v20.
Even when I was using Angular one of the main “goals” was to minimize direct subscribe calls (use async pipe, mostly to avoid manual cleanups), and always rely on zoneless specific change detection (change detection mode to ChangeDetectionStrategy.OnPush everywhere) specifically to help with performance and to plan for a future zoneless world. But this was years back, I don’t even remember the Angular version I was using.
As per Angular Update guide Adding provideZoneChangeDetection(), to your NgModule or bootstrapApplication providers fixing the issue.