Angular Version Upgrade - My Experience

Before writing this Blog, I was very curious about the Angular Version Upgrade process because I had never done it before even if I worked on Angular projects in past organizations. This time finally the moment came and in one of the technical calls, my client informed us that they are planning to upgrade the all Angular project to the latest versions. As this conversation happened before 30th November 2022, Angular 14 was the latest version at that time (now it is Angular 15). Because I was waiting a long time to learn this activity; without wasting any time I raised my hand and conveyed my interest in involving myself in this activity. At the same time the Q4 was about to start; we have a great culture ‘Learn N Grow’ at Elastik Teams and as a part of it we set at-least 3 goals each quarter. One is a learning goal, second is project related goal and last but not the list is the goal related to giving back to the community. And then I decided to keep the goal to upgrade two angular projects to the latest version (version 14).

So, I started my analysis to upgrade the Angular projects. I was assigned two relatively less complex projects to start with. One project was at Angular version 11 and another was at Angular version 9. Hence I decided to start with the project with version 11 because that would be easy to upgrade 3 versions (11 to 14). So based on it, I searched for the process of Angular version upgrade on the internet and I found the official Angular website which provides the detailed explanation and steps to be performed for upgrading from any version to any higher version.

Here the actual upgrade process started for Version Upgrade 11 to 14. There is no recommended way to upgrade directly from more than one upgrade at a time, for example, in my case, I should not directly upgrade from 11 to 14, rather it should be step by step, from 11 to 12, then 12 to 13 and at last 13 to 14. Angular has provided the different configurations to choose different options, like ‘Complexity of the Project’ where you can select either Basic, Medium and Advanced level. Also it provides an options to choose Other Dependencies like

1. I use ngUpgrade to combine AngularJS & Angular
2. I use Angular Material
3. I use Windows

Based on the options selection, it changes the steps to follow. As per my requirement I selected ‘Basic’ complexity and option #2 and #3 from the other dependencies because the project was using Angular Material and on Windows. Even if I followed every step mentioned in the checklist, there are few additional things I needed to do and I would like to discuss them with you.

Comparatively, the upgrade from 11 to 14 was smooth for me because of the less complex project and less breaking changes as well. Below are some extra steps than the steps provided by official website, which I followed

• Need to choose correct Node.js version before run the update command, in my case, I needed to install node version 14.20.0
• I Needed to run the ‘npm install’ command every time I completed the major upgrade process like from 11 to 12, 12 to 13 and 13 to 14, if not I was getting errors for some dependencies.
• If you are using git or any repository for your project, you will need to check-in/commit the changes made by each major upgrade. Otherwise, the update command won’t execute and throw an error.

Next upgrade project was from Angular version 9 to 14. Again, as mentioned above, it is not recommended to upgrade directly from 9 to 14, we will need to update the versions step-by-step. The configuration for this time is the same as in the last project, except the versions. I kept the node version also the same, that is 14.20.0. The upgrade process itself updated a number of places with new compatible code. Also, I followed all the same steps as the previous upgrade in this upgrade and below are some more extra steps I needed to perform.

• If you are getting an incompatible peer dependency related error, then for each major Angular upgrade command, you will need to use ‘--force’ flag at the end of command
• If you are getting a python related error which says ‘Can't find Python executable "python", you can set the PYTHON env variable.’ then execute below command

npm install -g windows-build-tools

• The latest installed typescript version (4.6.4) along with the upgrade process, makes the type casting rules more strict and you will get errors for mismatched data type assignments. For me, I got errors if Date typed variables assigned to date Strings etc. In that case I needed to convert the string into date explicitly. Also you will get an error if any property is used elsewhere before initialization etc.

And after completing all the steps mentioned above, I successfully upgraded the projects to the Angular version 14.2.12 and Angular Material version 14.2.7.

Apart from the above experience I learned a few more things about the version system in the package.json file. For example the difference between tilde(~) and caret(^) symbols in prefixes of the package versions. So, the version in the package.json is always in the form of major.minor.patch. **Tilde **freezes the major version and minor version and updates the package to the latest bug fixes or patch version, where **Caret **freezes the major version and updates the minor version along with the patch.

Angular official update guide has provided very detailed information and covered all the points needed to follow while upgrading the project, but above are some extra steps I needed to follow which can be very subjective to the project application or environment you are using, but I hope this information may help in similar scenarios as above. Thanks.

Happy Reading!