Angular Version Migration 🌋 Part-1
Updating the package makes developer’s life easier, starting from solving issues and tackling difficult task in easy manner. But it is equally challenging for us to convert the version for the same. I just want to share my experience and learning of converting my project from angular v14 to v19. A lot of trouble and learning were around it.
I am dividing this article into two, the first one contains the version upgradation from angular 14 to 16. And the latter contains v16 to v19. I am doing so to decrease the length of article and share all the learning I got from it.
This version upgradation is done step by step. 14 -> 15, 15 -> 16 and so on. Angular help us to do this upgradation with a single command, migration of the file is also handled with the same one. You may think it is cool. But the difficulty lies when understanding the changes and resolving the error while compiling our angular app. I am not threatening you, but this work helps you to learn more things.
Before moving to the migration part, we want to know how this migration affects the build process and the runtime of the angular app. You would have come across a term Zone.js in your package.lock.json. Zone.js is a library used in angular to detect the changes or events such as click, hover async call etc., in the application. In earlier version of angular Zone.js was added to avoid manual intervention in the DOM. Zone.js maintains all components in tree structure and if a small changes is detected in the component the whole tree gets updated. This is not a optimised process.
To avoid the performance overloading, in v15 the signals and rxjs was implemented. Unlike Zone.js, rxjs precisely changes the controller at event detections. After migrating to angular v19, we can remove the zone.js library with few set of changes in our project. Even angular has provide some plugin to do this in an ease manner.
And angular has also introduced a new build system with Vite and Esbuild. This was given as preview for developers in version 17. Let’s have a talk about the build system after migrating to version 19.
Registry
To begin with, let’s have some talk about registry. It’s not mandatory for us to depend on registry.npmjs.org for all package. Generally we may have package from two or more registries. Our first task is to add .npmrc file to our project.
registry=/*custom-registry*/
@angular:registry=https://registry.npmjs.org/In my case all packages are from my custom registry and angular related packages are from registry.npmjs.org. Configure the .npmrc file according to your project needs.
But this .npmrc files helped me until the version 16, after that I encountered a lot errors due to registry confusion. My great advice is to remove the custom packages from package.json for time being. After completing the migration, the custom packages can be added. This will help you to have a trouble free migration.
If our project contains angular material, it is also necessary to update the angular material in parallel. Major changes have been made in angular material as well. Let’s discuss in detail in upcoming section.
Angular v14 to Angular v15
Check whether your node is in either of the versions 14.20.x, 16.13.x or18.10.x. If not kindly upgrade to the version, because Angular v15 is supported only in these node version. There won’t be any major changes in your coding files. Typescript version may get updated. Ivy is the only rendering engine in angular v15, so remove the enableIvy attribute in tsconfig.ts file.
ng update @angular/core@15 @angular/cli@15It is always advised to run the application after each update. Try to run the application and check the working of it thoroughly before moving to the next migration.
As I mentioned, my project depends on my custom registry there was latency is downloading the package. There were instance where I quit the process and restart the same. While this issue, make sure that the node modules file is not deleted. If it is deleted, enter the npm i command and download the node modules and start the process because node module folder is necessary for ng update command.
A good practice to check the version of angular in every step. Just type ng version in command prompt to know the version of angular related packages.
Angular material 14 to Angular material 15
Get Just Coding Stuffs’s stories in your inbox
Join Medium for free to get updates from this writer.
A major changes have been implemented in the version 15. Many components were refactored, so few packages were imported from legacy packages. This migration is actually a huge one, you may find many changes in your files. Try to review the changes before moving.
ng update @angular/material@15This command update angular material and cdk package.
In further steps of migration, there is possibilities of other package to have deprecations or compatibility issues. Upgrade the version of those packages also. You may find a fix in the internet to use force flag in the command to bypass the warning and some low risk errors. I strongly recommend not to do so, this may be work fine now but for major migration it will lead to a mess.
Angular v15 to Angular v16
So next step, v15 to v16. Similar to before step. The Resolve class from angular/router package is deprecated and it is also not neccessary to implement CanActivate in angular guard. The above two changes will be migrated safely with the below command.
ng update @angular/core@16 @angular/cli@16Other important feature is reactivity primitives, which is one of the long-lasting requirement for the angular developers. Why signals have been implemented? Angular depends on Zone.js library for capturing user events. The problem has been already discussed. By implementing signals, the updation occurs component level which is considered as optimal.
Angular 16 also provides us to make the input variable mandatory by adding a required tag in the input decorator. This is one of the simple configuration which saves a lot of efforts. Similarly self closing components are introduced. These are few feature which helps us to write readable code. These changes are to be done manually.
Implementing signals in your project is manual process and needs more effort and time. I recommend you to leave the files as such and use these reactivity primitives in new components. Slowly update in the older one. This actually helps you to test your changes in a ease manner.
Angular material v15 to Angular material v16
ng update @angular/material@16The above command help us to upgrade the angular material and angular cdk from version 15 to version 16. All angular material component uses Material Design Component (MDC) by default.
If you are using ngcc in your build process, a warning message is thrown in terminal stating that it is deprecated. What is actually ngcc? Why it is deprecated? ngcc stands for “Angular Compatibility Compiler”. It is a tool to convert the Angular library code into a format that the Ivy compiler could understand. As the Ivy compiler was deprecated, the ngcc package is also deprecated. It is a good time to remove the package and the command.
Moving from version 14 to 16 helps us to have use the modern concepts and make our app fast. The latest angular version 19.
Happy Coding! ✨
