不在乎你是否使用 Angular 14, 15...19；您的應用程式仍然在 Zone.js 保護下。也許您覺得您的 Angular 應用程式運作良好，但在底層，使用 Zone.js，Angular 需要迭代整個 DOM 樹，從而影響應用程式效能。發生這種情況是因為Zone.js 使用模擬補丁來監聽DOM 事件，並在應用程式中觸發事件時通知Angular，因為Zone.js 不知道應用程式的狀態或導致更改的原因，Angular 必須檢查每個節點在應用程式中。
轉向無區域方法後，我們可以使用 ChangeDetectorRef.markForCheck (AsyncPipe)、ComponentRef.setInput，甚至 Signal 來對更改或新的生命週期掛鉤（如 afterNextRender 或 `afterRender`）做出反應。
首先，使用 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)
透過執行 npm uninstall zone.js 指令從專案中刪除 Zone.js。
npm uninstall zone.js
編輯 angular.json 檔案以從兩者中刪除 zone.js 和 zone.js/testing ，以將其從建置中刪除。使用明確 polyfills.ts 檔案的項目應刪除 import 'zone.js'；並匯入「zone.js/testing」；從檔案中。
要在沒有 zonejs 的情況下啟動我們的 Angular，請開啟 app.config.ts 文件，在提供者部分中，刪除 ProvideZoneChangeDetection({ eventCoalescing: true }) 並新增 ProvideExperimentalZonelessChangeDetection()
注意provideExperimentalZonelessChangeDetection 是實驗性的
app.config 看起來像：
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)]
};
儲存您的更改，運行 ngserve tada！我們的應用程式就像以前一樣工作，但沒有 NgZone！ ？
這很完美，但也許我想預設建立無區域。不用擔心; Angular CLI 允許您使用標誌來完成此操作。
直接使用 Angular CLI 創建無區域應用程序，使用 --experimental-zoneless 標誌創建一個新項目：
ng new fastweb --experimental-zoneless
--experimental-zoneless 標誌設定一個開箱即用的無區域項目，將其配置為無需 Angular 區域即可運作。
遺憾的是，在 Angular 19.0.1 中，我們需要透過執行 npm uninstall zonejs 手動刪除「zone.js」套件
之後，我們就可以在 Angular 19 中建立無區域應用程式了！
我們學習如何刪除 zone.js 現有應用程式或使用 CLI 標誌預設創建，我希望您開始在沒有 ZoneJS 的情況下建立您的應用程式。 ？
原始碼：https://github.com/danywalls/zoneless-angular-app
以上是Angular 和 ZoneLess的詳細內容。更多資訊請關注PHP中文網其他相關文章！
