Angular und ZoneLess

Es ist egal, ob Sie Angular 14, 15...19 verwenden; Ihre Apps befinden sich weiterhin unter dem Dach von Zone.js. Vielleicht haben Sie das Gefühl, dass Ihre Angular-Apps gut funktionieren, aber unter der Haube muss Angular mit Zone.js über den gesamten DOM-Baum iterieren, was sich auf die App-Leistung auswirkt. Dies geschieht, weil Zone.js Spott-Patches verwendet, um DOM-Ereignisse abzuhören und Angular zu benachrichtigen, wenn ein Ereignis in der App ausgelöst wird. Da Zone.js den Status Ihrer Anwendung oder die Ursache der Änderungen nicht kennt, muss Angular jeden Knoten überprüfen in der App.

Nachdem wir zu einem zonenlosen Ansatz übergegangen sind, können wir ChangeDetectorRef.markForCheck (AsyncPipe), ComponentRef.setInput oder sogar ein Signal verwenden, um auf Änderungen oder neue Lebenszyklus-Hooks wie afterNextRender oder „afterRender“ zu reagieren.

Umzug nach ZoneLess

Erstellen Sie zunächst ein neues Projekt mit 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)

Entfernen Sie Zone.js aus Ihrem Projekt, indem Sie den Befehl npm uninstall zone.js ausführen.

npm uninstall zone.js

Bearbeiten Sie Ihre Datei „angular.json“, um „zone.js“ und „zone.js/testing“ aus beiden zu entfernen und sie aus dem Build zu entfernen. Projekte, die eine explizite polyfills.ts-Datei verwenden, sollten import 'zone.js' entfernen; und importiere 'zone.js/testing'; aus der Datei.

Um unseren Angular ohne ZoneJS zu aktivieren, öffnen Sie die Datei app.config.ts, entfernen Sie in den Abschnitten „Provider“ ProvideZoneChangeDetection({ eventCoalescing: true }) und fügen Sie ProvideExperimentalZonelessChangeDetection() hinzu

Hinweis: ProvideExperimentalZonelessChangeDetection ist experimentell

Die app.config sieht so aus:

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)]
};

Speichern Sie Ihre Änderungen sofort! Unsere App funktioniert wie zuvor, jedoch ohne NgZone! ?

Das ist perfekt, aber vielleicht möchte ich standardmäßig zonenlos erstellen. Keine Sorge; Mit der Angular-CLI können Sie dies mit einem Flag tun.

Standardmäßig eine zonenlose App erstellen?

Erstellen Sie eine zonenlose App direkt mit der Angular-CLI und erstellen Sie ein neues Projekt mit der Flagge --experimental-zoneless:

ng new fastweb --experimental-zoneless

Das Flag --experimental-zoneless richtet ein zonenloses Projekt sofort ein und konfiguriert es so, dass es ohne Angular Zones funktioniert.

Leider müssen wir in Angular 19.0.1 das Paket „zone.js“ manuell entfernen, indem wir npm uninstall zonejs ausführen

Danach sind wir bereit, zonenlose Apps in Angular 19 zu erstellen!

Rekapitulieren

Wir haben gelernt, wie Sie vorhandene Zone.js-Anwendungen entfernen oder standardmäßig mithilfe des CLI-Flags erstellen. Ich hoffe, Sie beginnen mit der Erstellung Ihrer Apps ohne ZoneJS. ?

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

Das obige ist der detaillierte Inhalt vonAngular und ZoneLess. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!