Upgrading Angular

Sravana Pulleparthi

Angular is one of the most popular web frameworks available today. If upgraded regularly, it ensures strong performance, security, and stability for your application. Yet if not planned well, the Angular upgrade can become very effort-intensive. In this blog, we will discuss several steps and tips to upgrade Angular most efficiently. The version referred here are Angular 7 and Angular 13

Angular upgrades can be categorized as major, minor, and patches. Major Angular upgrades will mostly have a code impact. As the scale of the project increases, the code change complexity increases as well. Furthermore, related modules must be changed and any third-party libraries in use must be analysed and checked for compatibility.

When jumping from one major release to a distant major release – viz. Angular 7 to Angular 13 – it is best to complete it in one go as opposed to doing a one version incremental upgrade. This will save a substantial amount of both time and effort. Below steps explain how to do your Angular upgrade:

Step 1: Upgrade Angular CLI globally

Upgrade your Angular CLI globally i.e. Run it outside the project. If you are upgrading Angular CLI inside your project, then it will upgrade only “project-level” CLI version.

# Check your Angular CLI version using below command.

ng version

# Remove old Angular CLI version using below command

npm uninstall -g @angular-cli

# Upgrade latest Angular CLI version using below command

npm install -g @angular-cli

Step 2: Update Typescript file to 4.4.3 (Compatible with Angular 13)

# Update typescript globally using below command.

npm install -g typescript

# Upgrade typescript in the project using below command.

npm install typescript@4.4.3

Step 3: Update all typescript files

Check if all typescript files are compatible in the entire project. If not, please update all the files with required changes.

Step 4: Create new Angular project

# Create new Angular project using below command.

ng new <project-name>

Step5: Copy all the code under src folder from old version

After creating new project, copy all the modules (components/services/models/templates) from “src” folder of old version. It is recommended to copy modules one by one, as this will make it easier to test the application.

Step 6: Upgrade third party libraries

Upgrade third party libraries if you are using any in your project. First, check the compatible version with Angular latest version, and then migrate to the latest.

Step 7: Build project

The latest versions of Angular build will happen without specifying “–prod” mode.

# Use below command to build the Angular project

ng build

Step 8: Add docker

Add required Docker file to the project to make automated builds with minimal efforts to deploy the application.

Step 9: Thoroughly test to ensure functionality is working properly.

Conclusion

Upgrading to Angular13 provides the following benefits:

• Better performance because of
  • lower payload and shorted load time
  • use of IVY view engine. Individual components are compiled independently
  • use of modern browser features viz. CSS variables and web animations via native web APIs
• Improved security because of inbuilt security against common web-application vulnerabilities and attacks such as cross-site scripting attacks. The upgrade will fix security defects discovered in previous versions.
• Faster incremental builds as it is using Typescript’s latest versions.