Angular version update from 14 to 15

4 min readAug 29, 2023

In this article, I will be sharing key steps to migrate from Angular 14 to 15. In case you have a legacy application and need help migrating to Angular 14, please refer this article in which I specifically shared my legacy angular update journey with the issues I faced & solutions to those.

I strongly recommend going through the official angular update docs before moving ahead in this article: https://update.angular.io/?l=3&v=14.0-15.0.

The transition to v15 was surprisingly smooth compared to the challenging v10 to v14 update. Minor compilation errors were easily resolved, many of which were addressed during the v14 update. This article covers the following key steps:
Following process will be covered in the article below:

Analysis
Update process
Validating the updated version through browser
Breakdown of tasks and efforts
Conclusion

Analysis needed for the update:

The very first step is to read the documents step-by-step and analyze what changes would be needed by your application.

Analyze which peer dependencies are deprecated or no longer being maintained and would need updating.
Analyze what code would be impacted by ng update command and what code changes would need to be done manually.
Plan on unit testing and regression testing to see if there are any breaking changes in the application after the update.

Once you are through with the understanding of code changes needed for the update, you can start the update process.

Update process:

Now that your analysis is completed, let’s proceed to update process.

First ensure you have the required Node and NPM versions. Refer this version compatibility guide in order to find the correct node version for you. If you run ng update command with node version less than v14, you might see the below error:

Node.js version v14.18.1 detected.
The Angular CLI requires a minimum Node.js version of either v14.20, v16.14 or v18.10.
/**Solution: Use the below command:**/
sudo npm install -g n

2. Once you have the correct node versions installed, you can start with the update process. Run the following commands as mentioned in the update guide:

ng update

3. Since “ng update” needs to above packages to be updated first, let’s start updating each one by one. Also, note that based on some warnings/errors peer dependencies would need fixing or –force might need to be applied.
4. Run all the above commands one at a time.
ng update @angular-eslint/schematics
ng update @angular/cdk@15
ng update @angular/cli@15
ng update @angular/core@15
ng update @angular/google-maps@15
ng update @angular/material@15
ng update @ngrx/store
The above commands will modify the deprecated functions and properties in your files to use the new ones. Please refer the below screenshot for sample output. You might have to commit your code after every command above based on the files changed. Note: You would only require to commit the code, and don’t necessarily need to push your code to remote branch.
Some of the output of above commands might look like this:

After this update is done, you might want to review the modified changes and resolve compilation errors if any.
The last step would be to run “npm start” and test your code for any breaking changes.
If there are unit tests, you may want to test for failing tests too.

Validating your update:

To validate dev console shows correct version follow the steps below:
1. Press F12 in browser
2. Navigate to the Elements tab of the Dev Tools Menu
3. On the top section find the <body> tab and expand it
4. Under the <body> tag find the <app-component> tag
5. In that tag should be an ng-version that shows the current Angular version. We are looking for anything 15 or above

Breakdown of tasks and efforts:

I would suggest creating an epic named Angular Update v10->v14.
Under the epic you can create stories, and every story might have some tasks to complete.
Below is a simple example of the same:
Epic — Angular Update v14->v15
Stories:
SPIKE/Analysis -Read the guide and find out code changes needed in your project after update using following reference points:
Point 1: Make a list of those changes, create a story to update and AC to system test those touched flows.
Point 2: Analyze package.json for devDependencies and peerDependencies , and find out which dependencies are changing. Angular-Google-maps, MatProgressButtons, Angular Material, Karma test, lint, puppeteer, lighthouse etc. Each will need a separate story to be addressed.
Based on the list above, create a separate story for each and write ACs for the same and provide estimations accordingly.
Example: Based on the list in Point 1 and 2, stories can be as follows:
1. Run the update process and resolve compilation errors
2. Ensure unit tests are working
3. Ensure linting is working
4. Ensure angular-google-maps is implemented correctly
5. Ensure puppeteer is implemented
6. Regression testing
7. Performance testing
8. If you are using CICD or managing servers, there should be a story to deploy the updated version of Node and Npm to the servers and the updated commands for smooth deployment.

CONCLUSION:

The Angular update is a cumbersome process and one must focus more on analysis. Failing to analyze the tasks carefully might lead to issues with the update.

Thanks for reading!!

Angular version update from 14 to 15

Written by Shweta Mandavgane