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中文网其他相关文章！