Angulaire et sans zone

Peu importe si vous utilisez Angular 14, 15...19 ; vos applications sont toujours sous l'égide de Zone.js. Peut-être avez-vous l'impression que vos applications Angular fonctionnent bien, mais sous le capot, avec Zone.js, Angular doit parcourir l'ensemble de l'arborescence DOM, ce qui a un impact sur les performances des applications. Cela se produit parce que Zone.js utilise des correctifs moqueurs pour écouter les événements DOM et avertir Angular lorsqu'un événement est déclenché dans l'application, car Zone.js ne connaît pas l'état de votre application ni la cause des changements, Angular doit vérifier chaque nœud. dans l'application.

Après être passé à une approche sans zone, nous pouvons utiliser ChangeDetectorRef.markForCheck (AsyncPipe), ComponentRef.setInput ou même un Signal pour réagir aux changements ou aux nouveaux hooks de cycle de vie comme afterNextRender ou `afterRender`.

Déplacement vers ZoneLess

Tout d'abord, créez un nouveau projet à l'aide de la CLI Angular 19 avec la nouvelle application 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)

Supprimez Zone.js de votre projet en exécutant la commande npm uninstall zone.js.

npm uninstall zone.js

Modifiez votre fichier angulaire.json pour supprimer zone.js et zone.js/testing des deux afin de le supprimer de la build. Les projets qui utilisent le fichier polyfills.ts explicite doivent supprimer l'importation 'zone.js' ; et importez 'zone.js/testing' ; à partir du fichier.

Pour activer notre angulaire sans zonejs, ouvrez le fichier app.config.ts, dans les sections fournisseurs, supprimez provideZoneChangeDetection({ eventCoalescing: true }) et ajoutez provideExperimentalZonelessChangeDetection()

Notez que provideExperimentalZonelessChangeDetection est expérimental

Le app.config ressemble à :

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

Enregistrez vos modifications en cours d'exécution pour servir tada !! notre application fonctionne comme avant mais sans NgZone ! ?

C'est parfait, mais je veux peut-être créer un mode sans zone par défaut. Pas de soucis; la CLI angulaire vous permet de le faire avec un drapeau.

Créer une application sans zone par défaut ?

Créez une application sans zone directement à l'aide de la CLI angulaire, créez un nouveau projet avec l'indicateur --experimental-zoneless :

ng new fastweb --experimental-zoneless

L'indicateur --experimental-zoneless configure un projet sans zone prêt à l'emploi, en le configurant pour qu'il fonctionne sans zones angulaires.

Malheureusement, mais dans Angular 19.0.1, nous devons supprimer manuellement le package "zone.js" en exécutant npm uninstall zonejs

Après cela, nous sommes prêts à créer des applications sans zone dans Angular 19 !

Résumer

Nous avons appris comment supprimer les applications existantes zone.js ou en créer par défaut à l'aide de l'indicateur CLI. J'espère que vous commencerez à créer vos applications sans ZoneJS. ?

Code Source : https://github.com/danywalls/zoneless-angular-app

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!