How to Update an Angular Application

Introduction

Updating Angular is initially a simple task. However, it can sometimes become a headache. In this article, I will explain how to update your Angular application to a major version.

Support for your current version

The first essential step is to know where you stand. Check the official Angular documentation. If your version is not supported, it is advisable to update to a supported version as soon as possible. Being out of support leaves your application vulnerable to attacks and security vulnerabilities.

If you want to update to the latest version, I advise you to wait a prudent time of 2-3 months for it to stabilize if you are in an enterprise environment.

How to know the version of Angular you have?

To know the version of Angular you have in your application, you can run the following command in the terminal inside your application’s folder:

ng --version

You can also check your application’s package.json file. In the dependencies section, you will find the version of Angular you have installed:

"dependencies": {
  "@angular/animations": "^18.1.1",
  "@angular/common": "^18.1.1",
  "@angular/compiler": "^18.1.1",
  "@angular/core": "^18.1.1",
  "@angular/forms": "^18.1.1",
  "@angular/platform-browser": "^18.1.1",
  "@angular/platform-browser-dynamic": "^18.1.1",
  "@angular/router": "^18.1.1",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
  "zone.js": "~0.14.2"
  }

Official guide

On the official Angular website, there is an update guide that explains how to update from version Y to version Z. You can find the link in the official Angular documentation. The guide is highly recommended as it explains step by step how to update your Angular application. Here are some links with details for most cases:

The vast majority of common steps in all versions are:

Update TypeScript version
Update Node version
Update Angular CLI
Update Angular Core

Migrations

What is a migration in Angular?

Depending on the version, you will have access to new features that you can take advantage of. Implementing these features involves modifying your base code in many places in the application.

To save time and human errors, the Angular team has created automatic migrations. These migrations are scripts that run on the application and automatically modify the base code.

Third-party libraries

If your Angular application uses third-party libraries, you may need to update them as well. It is important to check the documentation of the third-party libraries you use to know if they are compatible with the new version of Angular. Some of the most common libraries to consider:

This is where most blockages usually occur. If a third-party library is not compatible with the new version of Angular, you will have to look for an alternative or wait for the library to be updated.

Due to these dependencies, it is better to wait for third-party libraries to update before updating Angular and wait a prudent time of 2-3 months for them to stabilize.

Update planning

I have seen that many times in companies this part goes very unnoticed. It is important to plan the Angular update and ensure the whole team is aligned. Developers tend to think it is a trivial and unimportant process. It is not.

1. Gather information

Before updating, you need to gather as much information as possible. Check the official Angular documentation, the update guide, the features list, and the migrations list.

With all this information, the team can get an idea of the implications of the update and estimate the time needed to carry it out and prioritize it or not during Sprint Planning sessions.

2. Features

In Angular, there are many new features divided into three types:

Stable: Ready for production. Follow compatibility, deprecation, and support policies.
Developer Preview: Fully functional and polished, but not ready to be stabilized under the normal deprecation policy.
Experimental: May not become stable or undergo significant changes before stabilization.

My opinion is always to implement stable features. The other two categories can change. If this happens, the best that can happen is having to rewrite code. The worst is that your application stops working in critical points because the feature is ultimately discarded.

Personally, I check the features list here. This website tracks Angular features and tells you if they are ready for production in a graphical and quick way.

3. Environments

You need the following environments:

Development: You can test new features and migrations. Usually your local environment.
Pre-production/Test: You can test the application with real data coming from production.

The test environment is the most important. It is the closest to production. If something fails in pre-production, it will fail in production.

Executing the update

1. Apply updates

At this point, what you are interested in is that your application continues to work. Do not worry about new features. The goal is to get through with the basics.

It is most advisable to create a new branch in your repository and apply the guide’s changes in that branch. Do not do it in the main branch.

Follow the official update guide and do not skip any steps. Start with TypeScript, continue with Node, Angular CLI, and Angular Core.

Then, apply the corresponding updates to third-party libraries if applicable. Before applying the updates, you must have the core Angular updates stable. Otherwise, you may not know if the error is from Angular or the third-party library.

2. Stabilize

Errors may arise in the application. Stabilize the code before moving forward. A good set of unit and end-to-end tests will help you detect errors. The more automated the tests, the better.

Here developers tend to refactor code. Do not do it. The goal is for the application to continue working. Each time you have something stable, commit and move forward. Progressive and constant.

3. Testing

Once the code is stable, it is time to perform functional tests. From my point of view, the actions to be carried out are:

Deploy the code in a pre-production environment.
Test with data that can be fictitious or modified. They must have the same structure and content as in production.
Test the critical functionalities of the application.
Do not mix new functionalities during the update.

This is called regression testing. The goal is for the application to continue working as before the update. At a more granular level, the functional tests I advise performing are:

Security (authentication and authorization)
Forms
Modals
Dropdowns
Data visualization
Performance tests
CSS and styles

In testing, it is essential that development, QA, and business teams collaborate. Each has a different perspective on the application. Developers are responsible for telling the application what to do. QA is responsible for saying if the application does what it is supposed to do. Business is responsible for saying if the application does what it is supposed to do for the end user.

The code is everyone’s responsibility.

4. Deployment

Once the functional tests have passed successfully, it is time to deploy the application in production. It is advisable to deploy during low activity hours. If something fails, you will have time to fix it. It is also important to have a contingency plan. If something fails, you must be able to revert to the previous version. What we typically call a rollback.

In the next 4-5 days, it will be crucial to monitor the application. Errors may arise that were not detected in the tests. If this happens, they must be fixed as soon as possible. Ensure the whole team is aligned with good communication and prioritize critical errors.

5. Post-deployment

Once the application is very stable, it will be time to evaluate and implement new features if the team decides so. It is important to implement them one by one. Do not implement all features at once. If you implement all features at once and something fails, you will not know what failed.

Conclusions

The following conclusions are from my own experience:

Separate the wheat from the chaff. Not all features are necessary.
Updating Angular is a process that requires time and planning.
It seems like a trivial process.
The whole team should be aligned.
Perform functional and regression tests.
Have a contingency plan.
Monitor the application.
Do not mix new features during the update.