Angular and ZoneLess

Don't care if you use Angular 14, 15...19; your apps are still under the Zone.js umbrella. Maybe you feel your Angular apps work well, but under the hood, with Zone.js, Angular needs to iterate over the entire DOM tree, impacting app performance. This happens because Zone.js uses mocking patches to listen to DOM events and notify Angular when an event is triggered in the app, because Zone.js doesn't know the state of your application or what caused changes, Angular has to check every node in the app.

After moving to a zoneless approach, we can use ChangeDetectorRef.markForCheck (AsyncPipe), ComponentRef.setInput, or even a Signal to react to changes or new lifecycle hooks like afterNextRender, or `afterRender`.

Moving To ZoneLess

First, create a new project using Angular 19 CLI ng new my-zoneless-app :

ng new my-zoneless-app
✔ Which stylesheet format would you like to use? Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss        
        ]
✔ Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? no
CREATE my-zoneless-app/README.md (1476 bytes)
CREATE my-zoneless-app/.editorconfig (314 bytes)
CREATE my-zoneless-app/.gitignore (587 bytes)
CREATE my-zoneless-app/angular.json (2800 bytes)
CREATE my-zoneless-app/package.json (1046 bytes)
CREATE my-zoneless-app/tsconfig.json (915 bytes)

Remove Zone.js from your project by running npm uninstall zone.js command.

npm uninstall zone.js

Edit your angular.json file to remove zone.js and zone.js/testing from both to remove it from the build. Projects that use explicit polyfills.ts file should remove import 'zone.js'; and import 'zone.js/testing'; from the file.

To activate our angular without zonejs, open app.config.ts file, in the providers sections, remove provideZoneChangeDetection({ eventCoalescing: true }) and add provideExperimentalZonelessChangeDetection()

Note provideExperimentalZonelessChangeDetection is experimental

The app.config looks like:

import {ApplicationConfig, provideExperimentalZonelessChangeDetection, provideZoneChangeDetection} from '@angular/core';
import { provideRouter } from '@angular/router';
​
import { routes } from './app.routes';
​
export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes)]
};

Save your changes run ng serve tada!! our app works just like before but without NgZone! ?

That is perfect, but maybe I want to create zoneless by default. No worries; the Angular CLI allows you to do it with a flag.

Create a Zone-Less App by Default?

Create a zone-less app directly using the Angular CLI, create a new project with the --experimental-zoneless flag:

ng new fastweb --experimental-zoneless

The --experimental-zoneless flag sets up a zone-less project out of the box, configuring it to work without Angular Zones.

Sadly but in. Angular 19.0.1 we need to remove "zone.js" package manually by run npm uninstall zonejs

After that, we are ready to build zoneless apps in Angular 19!

Recap

We learned how to remove zone.js existing applications or create by default using the CLI flag, I hope you start to build your apps without ZoneJS. ?

SourceCode: https://github.com/danywalls/zoneless-angular-app

The above is the detailed content of Angular and ZoneLess. For more information, please follow other related articles on the PHP Chinese website!