Seamless Transition: Upgrading from Angular 16 to 17, Uncovering the Latest Control Flow Language Features, and Gaining Insightful Lessons Learned.

Introduction

Angular version 17 was released on November 8, 2023, and it includes a new feature called Angular Code Flow. This new code flow is built-in to Angular and will enable simpler integration of components based on Angular signals.

In this blog post, I will provide detailed information about upgrading an Angular Talent Management application version 16 and the manual and automated approach I took to convert all the Angular components from structural directives (such as ngif, ngfor) to new code flow (@if, @for).

You can find the upgraded Angular 17 source code of the project on GitHub and the online demo here.

Content

The blog contains three parts

Part 1: Elevating Your Angular App
A Step-by-Step Guide to Upgrading from Version 16 to 17

Part 2: Transitioning Structural Directives
Converting Old Directives to the New Control Blocks Manually

Part 3: Seamless Transition
Upgrading to New Control Flow with Angular Schematics’ Automatic Upgrade