Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

How you build with Angular has changed quite a lot over the years.

For example, the `inject` function was introduced in version 14 but you might still be familiar with Angular's constructor injection.

Similarly, structural directives like `ngif` or `ngfor` have been replaced with `@if` and `@for` blocks since version 17 and beyond.

These are patterns that need to be adjusted if you want to stay up-to-date with the latest Angular has to provide.

Luckily, Angular gives you great tools in the form of a migration CLI for supporting your migration efforts as you incrementally update your App from older version features and patterns. 

When you're done with this course you'll know how to target specific features, folders, and files to migrate to the latest Angular version.

You'll learn how to migrate:
- Structural directives with control flow syntax
- Constructor dependency inject to inject function
- Make components standalone
- Lazy load routes
- Input/Output decorators to signal-based API


Use automatic migration to make your angular codebase use the new control flow. Or follow a manual step-by-step migration, if needed.

The new control flow syntax in Angular, available from version 17, simplifies template syntax and eliminates the need to import `CommonModule`.

To adopt the new syntax, Angular developers can either manually update their templates using the `@if`, `@for`, and `@switch` blocks or utilize the official migration schematic provided by the Angular CLI.

The schematic (`ng generate @angular/core:control-flow`) automatically migrates existing code to utilize the new control flow syntax. This new syntax offers improved readability and maintainability for Angular templates.

Additionally, by removing the requirement to import CommonModule, the new control flow syntax can lead to a slight reduction in bundle size.

Replace Angular Structural Directives with Control Flow Syntax using Angular Migrations

Use automatic migration to make your angular codebase use the new inject-based dependency injection. Or follow a manual step-by-step migration, if needed.

Angular developers can benefit from using inject-based dependency injection through its simplified syntax, improved type safety, and seamless integration with decorators.

Instead of relying on constructor parameters, developers can use the `inject()` function directly where a dependency is needed, resulting in more accurate type checking and early error detection during development.

The `inject()` function works smoothly with Angular decorators like `@Host`, `@Self`, and `@Optional`, providing better control over dependency resolution.

The Angular CLI offers an automated migration schematic (`ng generate @angular/core:inject`) that simplifies the transition from constructor-based injection to using `inject()`. This schematic automatically converts existing code, minimizing manual effort and ensuring a smoother migration process.

Replace Angular DI Constructor Injection with the inject function using Angular Migrations

Use automatic migration to make your angular codebase standalone. Or follow a manual step-by-step migration, if needed.

To use standalone components, add the `standalone: true` property to the component decorator and explicitly import necessary Angular features in the imports array. For instance, if your component utilizes `NgIf`, include it in the `imports` array.

When bootstrapping a standalone component, utilize the `bootstrapApplication` function, replacing the `bootstrapModule` function.

Existing Angular applications can be incrementally migrated to standalone components using the Angular CLI schematic `ng generate @angular/core:standalone`. This schematic assists in converting existing code and transitioning to the standalone bootstrapping API.

Make Components, Directives and Pipes standalone using Angular Migrations

Use automatic migration to make your angular codebase use lazy-loaded routes. Or follow a manual step-by-step migration, if needed.

Lazy loading is a pattern in Angular that allows you to load feature modules on demand, rather than loading the entire application upfront.

It significantly improves the initial load time of an application, especially for large applications, as the browser only downloads the necessary code for the initially requested route. This optimization technique enhances user experience and overall application performance.

You can manually implement lazy loading by configuring routes to use the `loadComponent` property instead of component, which utilizes dynamic imports to fetch modules when needed.

Angular also provides an automated migration tool that helps convert eagerly loaded routes to lazy-loaded routes. This migration schematic, invoked using `ng generate @angular/core:route-lazy-loading`, analyzes your routing configuration and transforms it to leverage lazy loading.

Make Angular Routes Lazy Loaded using Angular Migrations

Angular apps will benefit from using signal inputs and outputs as they offer a more declarative and reactive coding style.

Signal inputs enable components to directly react to changes in signals, making data flow within components more predictable and easier to manage.

Angular developers can either manually update their components to use signal inputs by adding the `() `syntax to input bindings in templates and using the `Signal` type for input properties, or they can utilize the automated migration schematic.

The `ngxtension` package offers a schematic (`ng g ngxtension:convert-signal-inputs`) that automatically converts existing input bindings and references to use signal inputs, streamlining the adoption of this feature.

This automatic conversion helps maintain consistency and reduces the potential for errors during the transition. The migration schematic also updates the components' templates to use the new signal inputs, which might necessitate minor manual adjustments for type narrowing in certain cases.

Angular v18 Migrations in Practice

Tomasz Ducin

Course Content