Angular 和 ZoneLess

Susan Sarandon原创: 2025-01-03 14:03:41176浏览

不在乎你是否使用 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 and ZoneLess