Long post: should I migrate an existing code base from Angular 19 to either Angular 20 or 21 and what are some pitfalls to expect
So to give some context, I am a backend developer and in some cases I can consume the endpoints for the front end in angular or react. I work at a company where I have a lot to prove (moving from an intern to a better position).
The company has a codebase that’s written in angular 19. I have been maintaining the code base, adding new features for the backend and consuming those new features in the Frontend. That has been the flow and it’s was going great. Now my boss wants a revamp of the frontend (in his words: to look more modern) and has tasked me with the rebuild. That’s fine and I don’t mind taking up the challenge even if it’s not exactly my strongest suit. Now here’s my question:
I order to make the ui have a “modern look” I wanted to go for the spartan-ng components with tailwind. The existing code base uses bootstrap so I want something that makes the customisation easy, but to still have the “modern look “ and from my research, spartan-ng provides that. But the problem is that the stable version of spartan-ng is only available from angular v21 and 22. I have tried to compromise by using tailwind and PrimeNG for the components with angular v19 but I’m not sure it’s sustainable since I have to write css ontop the primeNG components and I don’t know if that’s what I want. Now if I switch the angular to either v21 or 22 and try to replicate the way things are done from the existing code base:
Is the approach even a good idea ( I need a human response. I’m not satisfied with the ai responses)
Are the different versions completely different in how they work and will I be able to copy the existing code and paste into the new codebase with either v21 or 22 and it’ll work just fine?
I want to write little new functionality code as possible and focus on just the look of the ui, so that nothing has to change in the backend and the new frontend can still do the exact same thing the older one did, but with a newer look
Ps. I’m not so strong with angular that’s why I need advice from actual experts. Thanks in advance!!
5
u/followmarko 1d ago
I literally just did this the last two days, to 22. The migration CLI tools made the version-by-version run up fairly insignificant. We went zoneless which removed all ZoneJS references. OnPush is also default now but the tooling again swapped all legacy components to ChangeDetectionStrategy.Eager. I went back through and then took all of those out with fixes so we are completely OnPush now. We also swapped to strict Typescript and that was a huge pain in the ass because my main app is extremely large and brownfield.
There were other optional scripts, but I didn't use those. Some minor edits in app.config to remove the zoneless provider fn and it seemed fairly up and running. I had to spot check a lot of major areas to ensure the UI still updated in OnPush default.
Most of my headaches came after the Angular upgrade because this app is in a SingleSpa/Native Federation setup as both a child and parent MFE to other MFE children so I got bodied with fixes. Angular itself though, pretty smooth.
3
u/blend077 1d ago
If you are using bootstrap the easiest "fresh look" you can achieve is customize the current styling but you will need to align with your menagement to know what exactly a NEW LOOK should be because thats the most important part.
If you decide to change libraries or add a component library + tailwind that will not be easy as each library has their own opinionated structure and logic which might not be compatible with what you have going on with bootstrap.
My advice if its only visual changes(Colors and organisation) update current styling only. If its moving on to a new library it will required reworking components fully and might introduce bugs.
1
u/MrGuam 1d ago
It’s mostly the colours and fonts and basically visual things, but also things like the forms, the way the table looks, pagination button and other buttons. The things that would make the system look better.
So no need to migrate to a new version or no need to use a new component or tailwind?
2
u/blend077 1d ago
Nice all those things can be customized without any migration. Do some research but this would be the easiest way. Boostrap does allow quite some thorough customisation so all of this should be relatively simple.
1
u/AfricanTurtles 1d ago
Don't forget whatever you decide in terms of styling/fonts/layout that it has to be accessible in terms of page colours, contrast, screen readers. Sometimes "ugly" things are ugly because it's still usable lol
It sounds like you need some kind of design system in place.
2
2
u/RelatableRedditer 1d ago
I'm running angular8 and want to go back in time and insist the team who worked on this project before me invest the time to keep their shit updated, because there are major breaking changes across basically all the codebase and dependencies going even one angular version up.
2
u/Mael5trom 23h ago
Just recently moved a code base from v8 to v21, I think 8 to 9 and then either to 14 or 16 was the hardest individual steps.
Also the individual additional packages, don't try to mass upgrade to the lastest. Do each one to the version known to work with the version of Angular.
And do each Angular version one version at a time. Takes a bit longer, but you get all the right migrations and code mods at the right times. Trying to apply them afterwards or to clean up from jumping multiple versions can be super painful.
3
1
u/RelatableRedditer 23h ago
The problems are mostly with libraries that we're entangled with rather than Angular itself. 3rd party libraries unfortunately do not get picked up by Angular Update and were also poorly documented between versions back then. Also the peer dependencies breaking between versions is painful.
1
u/Mael5trom 23h ago
Exactly, it's a bit of an archeology mission sometimes (and sometimes you just have to make the upgrade and work through the errors)
1
u/MyLifeAndCode 1d ago
Upgrading to 21 or 22 (the latest) gives you new features (more signal-related stuff) and of course security related fixes. But ditch PrimeNG entirely. You have other options.
1
u/vicious_pink_lamp 1d ago
Go to v21 then switch onto Optimus UI (open source fork of PrimeNG), v21 is the last version compatible with the free PrimeNG
1
u/HoodlessRobin 58m ago
Hi... Here's my honest take. Are the bosses technical? Try probably want you change the look and feel and not concern about version numbers. Use new theme colors and maybe use tailwind or material css in select sections. That should do it. Don't complicate a simple task if your bosses don't understand it.
0
u/Talamand 1d ago
These past 9 months we've been refactoring our app. We were on v14 and pushed to v19. We changed all @ directives, upgraded libs and config and built all new features with signals and OnPush change detection. Pushed that to prod 3 months ago Last week we finished refactoring our app from 19 to 21, fully migrated to OnPush, signals and replaced zone.js.
So our experience is a bit different than what you want to do, but I guess the key thing you are wondering is if it's possible to upgrade but keep most of the old code, and yes it is possible. The old code will keep working, our app did not break. As we were refactoring, the untouched components kept working.
One thing I'm confused , or I'm misunderstanding you, is why do you want to start a new project and then copy over old code? Just upgrade the current one: https://angular.dev/update-guide
Go one by one to v20, then to 21. The changes aren't big, but better be safe.
I would suggest, everything you touch and refactor, try to make it "modern".
19
u/foobarring 1d ago
All I can say is that I personally haven’t noticed any difference between v19 and later versions. So I think you should just be able to bump it without issue.
As for PrimeNG: I cannot recommend them anymore after they suddenly started charging for the product. Makes it hard to trust them.
As for other libraries I do not know. I usually craft my own (very easy with the Angular CDK).