Angular Version Migration 🌋 Part-2

This is actually continuation of the article. In last section, we migrated our application from v14 to v16 and talked about few features for the angular version. We will continue our migration story with a lot of learnings.

Angular v16 to v17

ng update @angular/core@17 @angular/cli@17

The version of the typescript was upgraded which may produce type errors in your project. Try to implement appropriate interface for objects. There would be a small change in the zone.js import statement in polyfills.ts file.

// import 'zone.js/dist/zone';
// replace to
import 'zone.js'; 

The zone.js was directly exposed in angular v17. So it is important to update the import statement as well. In angular.json, the name browserTarget was changed to buildTarget. The browserTarget implicitly means the client side build process. buildTarget name clearly states that the build process is meant for both CSR and SSR.

Angular material v16 to v17

In angular material v15 the material components were moved to legacy package. As discussed the material components were enhanced by following some Material Design principals. Angular team has decided to follow the MDC principle devised by Google. The respective changes were done in angular material v17. All the component were to mdc package.

ng update @angular/material@17

If you have overwritten the styles of the mat component, try to check the structure and the class name in the angular material components. Change the class name in the scss or css file to preserve the app design. In my case it was a tedious process. Don’t forget to remove the legacy package in theme files.

Angular v17 to v18

As discussed in the previous article the Zone.js is a library which is used for change detection in angular. In version 18 the angular has released the experimental APIs to move our application to Zoneless. To move to zoneless application, we have to use signals in the components.

Get Just Coding Stuffs’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

I recommend to make your application zoneless gradually, it is very complicated process rigorous testing is required.

ng update @angular/core@18 @angular/cli@18

If your planing to convert your application to SSR, v18 has more options to do. Kindly go through their new documentation released.

Angular material v17 to v18

ng update @angular/material@18

The styling system was changes to M3 (Material 3)tokens. To preserve backward compatibility the angular material has moved the existing M2 to a new functions.

For example in place of mat.define-palette you are suppose to use mat.m2-define-palette, check the scss file before committing the changes. If you wish to use the M3 have glance at the docs.

Angular v18 to v19

Finally to the latest version of the angular. A new reactive primitives — linkedSignals and resource are introduced for developer preview. You can use these primitives, but the working of those API may change in upcoming update. Incremental Hydration is also under developer preview.

ng update @angular/core@19 @angular/cli@19

Angular material v18 to v19

The angular material comes with awaiting time picker component and 2-D drag and drop component. The material 3 has made to stable version.

ng update @angular/material@18

Migrating to latest angular version helps you to make your application zone less which may result in smooth user experience and faster build. Use the latest reactive primitives of the angular and make your application as fast as possible.

Happy Coding! ✨