Modernize Your Angular App with Migration Schematics

Use core migrations to simplify the adoption of the latest framework features

Angular’s release cycle — with major updates every six months and minor versions in between — can make it challenging to integrate the latest features without disrupting projects or feeling a constant FOMO over newly launched capabilities.

To alleviate this, Angular provides schematics —scripts that automate code modifications — to help developers upgrade versions and apply transformations needed to adopt new capabilities and coding conventions with minimal effort.

Schematics gained significant attention in Angular 18.2 with the availability of new migration scripts dedicated to help transitioning to the inject() function and adopting lazy-loaded routes for standalone components. Angular 19 builds on this trend with an expanded collection of schematics to further support code modernization.

In this article, we will get an overview of the currently available migration schematics that help bring your codebase in line with the latest framework features.

Standalone Migrations

With the push toward standalone components, directives, and pipes since Angular 14, we have a more efficient way to build and scale applications without the overhead of traditional NgModules.

In Angular 19, new apps are standalone by default, while existing ones that haven’t yet migrated can incrementally adopt the standalone approach by running the following command:

ng generate @angular/core:standalone

Once you execute the command, follow the detailed steps outlined in the official documentation to successfully complete the standalone migration.

When you are ready to upgrade Angular from v18 to v19 using ng upgrade, the explicit-standalone-flag migration automatically adds standalone:false to the decorator of non-standalone declarations and removes the standalone:true property from those already configured as standalone, simplifying the authoring experience.

The transition to the standalone setup opens up additional optimizations opportunities. One of these is the lazy-loaded routes migration, which finds standalone components that are currently loaded immediately and switch them to lazy-loaded routes, resulting in smaller JavaScript chunks that loads on demand, leading to faster page loads. To apply this migration, run the following command:

ng generate @angular/core:route-lazy-loading

Afterward, you can use tools like Lighthouse to measure performance improvements and assess the impact on your application.

Template Syntax Migration

During the framework renaissance, Angular 17 introduced a new control flow to improve the internal structure and code readability. If you are still using traditional structural directives like *ngIf and *ngFor, it may be time to switch to this more intuitive syntax, which simplifies complex conditional and looping logic. To facilitate this transition, you can run the following command, letting the migration handle much of the repetitive work for you:

ng generate @angular/core:control-flow

Dependency Injection Migration

Angular’s shift to the inject() functional approach to dependency injection has improved both readability and type safety. If your project still relies on the traditional constructor-based method, running the following command will replace injections within constructor parameters with inject() calls across your codebase:

ng generate @angular/core:inject

Like other migration scripts, make sure to review the changes, update unit tests, and manually address any issues that may arise before committing your code and pushing it to production.

Signals Migrations

As the framework transitions to a Signal-based reactivity model, a set of migrations offers a path to quickly get the benefits of the Signals graph. In Angular 19, we have the option to run the following command to consolidate all Signals-related schematics into a single migration:

ng generate @angular/core:signals

If you prefer a more controlled approach, you can run each migration individually. For example, the following command updates the traditional @ViewChild() decorator to the signal-based viewChild() query and changes @ContentChild() to contentChild():

ng generate @angular/core:signal-queries

By default, this migration leaves some traditional queries unchanged if they cannot be safely converted. It’s a good practice to add the — insert-todos flag to have meaningful TODO comments next to any query decorator that couldn’t be migrated automatically, giving you clear insights into what needs manual refactoring. If you prefer a more agressive approach, you can use the — best-effort-mode flag, allowing the migration to attempt refactoring as many queries as possible, even if some changes might break your app and still require your intervention.

To further adopt Signals within your component structure, you can update traditional @Input() properties to use the Signal-based input() function by running the following command:

ng generate @angular/core:signal-input

This change enhances the performance by consolidating a more reactive data flow within components. And as with the query migration, the — insert-todos and — best-effort-mode flags are available to guide manual adjustments and attempt more extensive refactoring based on your project’s needs.

Similarly, the following command updates @Output() declarations to their functional equivalent and adjusts its references:

ng generate @angular/core:output-migration

It’s important to note that while the output() function uses a Signal-like syntax, it is not actually a Signal like input(). This consistent syntax was chosen to simplify component authoring and improve type safety, making component interactions more readable and reliable.

Outro

These migration scripts not only open the door to modern coding practices but also enhance the performance and maintainability of your application.

As you adopt these changes, I’d love to ask: what additional migrations do you think would be valuable beyond those provided in the Angular core?

Lee la versión en español de este artículo en el blog de ng-conf:

Moderniza tu aplicación de Angular con esquemáticas de migración

Modernize Your Angular App with Migration Schematics was originally published in ngconf on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leave a Comment

Your email address will not be published. Required fields are marked *