Upgrading your app to Angular 9: A short guide

Angular 9 is here in all it's glory and you want to try it out as soon as you want. However, there is just this problem of your existing app and its complexity that makes you want to really think before taking the jump. Well, here is a small guide to help you through the process.

I recently went through this process for an app with medium complexity and it went surprisingly smooth (my previous experiences with upgrading haven't been so good). Here is how I did it.

The official update page

I started with the official update guide at update.angular.io. This should be your go to place for all the little technical nitty gritty of the upgrade. Just select your existing app's current Angular version and the modules you're using (e.g. Angular material) and it'll churn out a step by step guide to help you through this process. Keep this open and check all the items as you complete them so you don't miss anything!

A summary

So what follows is a summary of the commands you need to run on your console/terminal or command line.

Upgrade to the latest version of Angular 8 with these commands:

ng update @angular/core@8 @angular/cli@8

Then move on and run the following commands to upgrade to Angular 9:

ng update @angular/core @angular/cli

The good thing about the ng update command is that it will automatically make the minor syntax changes that are needed to make your app compatible with Angular 9.

In practice, I got errors on a few third party libraries complaining about being incompatible with the upgraded Angular version. You will probably want to upgrade these third party libraries when you've updated to the new version of Angular, so it's fine if you use the --force option to ignore these incompatibilities for now.

If you use Angular material in your project, run the following command as well:

ng update @angular/material

This will cause a lot of commits in your code, but no-worries, almost all of it will be related to import statements being updated to refer to specific material modules.

So now that this is done, it's a good idea to review the changes made in code as a result of these commands, then move on to the perhaps a more difficult last step in the upgrade process.

Upgrading your third party libraries

This step is strictly not related to the framework itself, but depends on your app and the number of third party libraries it is using.

So basically you just need to check your third party libraries and make sure you have the latest versions or a version which is compatible with Angular 9. The following command will help you in this process:

npm outdated

This command will give you a list of your third party libraries and show which ones need to be updated. It is best here to manually check each on their git repos to see if there are any updates to the latest version.

All major libraries will have an Angular 9 upgrade, but if your particular library doesn't, just leave it be and it might keep working as it has done till now. But if it gives issues, you'll probably need to find a good replacement.

This is where this last step can be a bit unpredictable and also time consuming. However, if the number of libraries is reasonable, you can get it done fairly quickly.

Congratulations

If you've managed to reach thus far, Congratulations! You've just upgraded your app to Angular 9 and can now use the new spectacular Ivy rendering engine, along with all the other cool performance upgrades that come with it.

If your app is smallish or quite large, then be sure to check your production builds and bundle sizes - as it should've gone through a large reduction.

Check out all of the new features Angular 9 brings here.

Hope this helps and happy coding!