How to get ready for zoneless future in Angular

Photo by Raimond Klavins on Unsplash

Angular 18 introduces experimental support for zoneless change detection, which is more efficient than the well-known zone.js based version.

For more details on this feature, refer to the links provided below 👇

Angular v18 is now available!

What's new in Angular 18.0?

Starting a new project makes it easy to choose the zoneless option. However, incorporating this feature into existing applications might not be as simple.

In this blog post, I will discuss two simple steps you can take to prepare for the zoneless future in Angular.

Establishing a process to create new features that accommodate zoneless change detection is desirable. Though a detailed explanation may require extra effort, it’s reasonable to presume that if your code operates with the OnPush change detection strategy, it will also be compatible with zoneless change detection.

You can find more information about it here 👇

A change detection, zone.js, zoneless, local change detection, and signals story 📚

A new era for Angular - Zoneless Change Detection

To implement this pattern, you can take two actions:

1. Modify the default change detection strategy in the angular.json (nx.json) file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ng-18-playground": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "changeDetection": "OnPush"
        }
      }
      
      ...
    }
  }

2. Add the ESLint rule to enforce the OnPush change detection:

// @ts-check
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/prefer-on-push-component-change-detection": ["warn|error"],
    },
  }
  ...
);

angular-eslint/packages/eslint-plugin/docs/rules/prefer-on-push-component-change-detection.md at…

Nx allows you to set rules specifically for selected projects. This feature lets you designate the severity level as an error for new projects, while maintaining warnings for existing ones until they comply with zoneless change detection through refactoring.

Though zoneless change detection is an experimental feature, it’s advantageous to keep it in mind when developing new features. This way, you can easily transition to theworld without zone.js in the future.

I hope you liked my blog post, thanks for reading! 🙂