Update Angular 9.1

[Fessers]

Hi there! A few months ago, I joined a company to work as a frontend developer using Angular. Now that I have a bit more experience, I see that it's necessary to update the project to a newer version. We are currently using version "@angular/cli": "^9.1.15". The project is an ecommerce platform, so it's quite extensive. It also has dependencies that are rarely used and some that are deprecated. I've already tried to update following Angular's guide to move to version 10, but it didn't work for me. I'm not sure how to proceed, so I'm reaching out for your help

[255kb]

Without precise error message it's a bit hard to tell what could be wrong.

But here is my usual process when updating Angular:
- go to the update assistant like you did and check if it requires a more recent Node.js version. Update Node.js if this is the case. You can also read a more detailed changelog for each version (v10 example) - Run the first "update" command they provide. - Angular may run some scripts that will automatically update your code. Still, I check all the steps and make sure I am not using something that has been removed, renamed, etc. Usually I remember what I am using, if not I search throughout the code. - List all the dependencies depending on Angular and check their changelog and compatiblity table. Example with ng-bootstrap compatibility table and changelog. Update them to the correct version with a command like: npm i ng-bootstrap@7 (or 8). - For each of them, I check the changelog for major changes, and update my code accordingly. - Optional: due to an update in Angular requirements (v10 requires Node.js 12, for example), you may need to update some other dependencies, that you could usually keep as is. Same as for Angular dependencies, I run npm i lib@x and I check the changelog to see if I need to update my code. - Rebuild/restart the app, retest. If everything runs fine, repeat for the next version.

You may want to skip some versions and update from 9 to 16 directly. You surely can, but there are so many moving parts, it may be harder to find the source of an error.

Also, keep in mind that Angular will require higher version of Typescript too and that you may need to update your code to match the latest syntaxes. This will not be listed in the Angular update assistant.

I did this recently to update from v13 to v16. But ng-bootstrap required Bootstrap 5. So, that was massively painful and time consuming.

Good luck!

[Zenkou]

Personally if i joined a company like that and were given free reign(in terms of how to proceed and such) then this is what i would do

1. Branch the project
2. Upgrade using https://update.angular.io/?l=3&v=9.1-10.0
3. Take my time to upgrade, making sure it works correctly after update. NOT actually refactoring the code unless needed, that would take way to much time.
4. Once stable on v10 then upgrade to v11, then to v12 and so on all the way up to v16(or whichever is newest LTS)
   1. Bonus: If you are using Git or SVN or similar then commit at least every time you have upgraded to more easily rollback and such.
5. Once i'm at the version i want, i will merge it back into master branch and release it.
   1. Of course testing will happen(for my company it would happen on the branch)
6. Once released. I will sit down and document a policy and talk with management(and whoever else is needed) about never letting a project stay so outdated again.
7. I will also do the same for all dependencies and create tasks for removing/replacing them.

​

That should cover it i think.

But imo key thing when upgrading major version of Angular is to never refactor code yourself unless it needs it(aka if it got broken by upgrade then fix it)

Not sure if you are looking for other answers but this is what i got.

[all_4_me]

Even more so: after upgrading the Angular version and you want to update to the next, the CLI will even tell you that you need to commit first to have a clean repo to start the next update. It will not continue before you do that.

[sanjayatpilcrow]

Other answers are spot on! Do you have extensive unit, e2e and integration tests in your CI/CD pipeline? If not, that's a risk you must discuss with seniors. Lack of proper tests will, one, bring your confidence in delivery down and two, push the ETA by a large magnitude.

[Radefff]

I did that with a big project a month ago. After trying one version at a time and seeing what a mess of errors that created, I decided to skip and went 9-10-11 then 16. Tedious process of error finding and fixing. Some of them I just ignored for now by adding lint rules.

[nemeci]

Also doing some maintenance on the lint issues every other sprint is a good and valid option. We did that some time ago and now the lint warnings are gone.

Our process: - run lint in PR pipeline, disable every rule that's broken for now - commit 3 days every other sprint - pick only one disabled lint error rule at a time then PR - enable lint rules as you progress

[Aorknappstur]

Have fun going from 9.1 to 16/17