Sudut dan Kurang Zon

Tidak kisah jika anda menggunakan Angular 14, 15...19; apl anda masih berada di bawah payung Zone.js. Mungkin anda rasa apl Angular anda berfungsi dengan baik, tetapi di bawah hud, dengan Zone.js, Angular perlu mengulangi keseluruhan pepohon DOM, memberi kesan kepada prestasi apl. Ini berlaku kerana Zone.js menggunakan tampung mengejek untuk mendengar acara DOM dan memberitahu Angular apabila peristiwa dicetuskan dalam apl, kerana Zone.js tidak mengetahui keadaan aplikasi anda atau perkara yang menyebabkan perubahan, Angular perlu menyemak setiap nod dalam apl.

Selepas beralih kepada pendekatan tanpa zon, kami boleh menggunakan ChangeDetectorRef.markForCheck (AsyncPipe), ComponentRef.setInput, atau malah Isyarat untuk bertindak balas terhadap perubahan atau cangkuk kitaran hayat baharu seperti afterNextRender, atau `afterRender`.

Berpindah Ke ZonKurang

Mula-mula, buat projek baharu menggunakan Angular 19 CLI ng aplikasi my-zoneless-baru :

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)

Alih keluar Zone.js daripada projek anda dengan menjalankan arahan npm uninstall zone.js.

npm uninstall zone.js

Edit fail angular.json anda untuk mengalih keluar zone.js dan zone.js/testing daripada kedua-duanya untuk mengeluarkannya daripada binaan. Projek yang menggunakan fail polyfills.ts eksplisit harus mengalih keluar import 'zone.js'; dan import 'zone.js/testing'; daripada fail.

Untuk mengaktifkan sudut kami tanpa zonejs, buka fail app.config.ts, dalam bahagian penyedia, alih keluar provideZoneChangeDetection({ eventCoalescing: true }) dan tambah provideExperimentalZonelessChangeDetection()

Nota provideExperimentalZonelessChangeDetection adalah percubaan

App.config kelihatan seperti:

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

Simpan perubahan anda run ng serve tada!! apl kami berfungsi seperti dahulu tetapi tanpa NgZone! ?

Itu sempurna, tetapi mungkin saya mahu mencipta tanpa zon secara lalai. Jangan risau; CLI Sudut membolehkan anda melakukannya dengan bendera.

Cipta Apl Tanpa Zon secara Lalai?

Buat apl tanpa zon secara terus menggunakan CLI Sudut, buat projek baharu dengan bendera --experimental-zoneless:

ng new fastweb --experimental-zoneless

Bendera --experimental-zoneless menyediakan projek tanpa zon di luar kotak, mengkonfigurasinya supaya berfungsi tanpa Zon Sudut.

Malangnya tetapi masuk. Angular 19.0.1 kita perlu mengalih keluar pakej "zone.js" secara manual dengan menjalankan npm uninstall zonejs

Selepas itu, kami bersedia untuk membina apl tanpa zon dalam Angular 19!

Rekap

Kami mempelajari cara mengalih keluar aplikasi sedia ada zone.js atau mencipta secara lalai menggunakan bendera CLI, saya harap anda mula membina apl anda tanpa ZoneJS. ?

Kod Sumber: https://github.com/danywalls/zoneless-angular-app

Atas ialah kandungan terperinci Sudut dan Kurang Zon. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!