Angular 和 ZoneLess

不在乎你是否使用 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`）做出反應。

移動到ZoneLess

首先，使用 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中文網其他相關文章！