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 uninstallzone.js コマンドを実行して、プロジェクトから Zone.js を削除します。

npm uninstall zone.js

angular.json ファイルを編集して、zone.js とzone.js/testing の両方から削除し、ビルドから削除します。明示的なpolyfills.tsファイルを使用するプロジェクトは、インポート「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)]
};

変更を保存して実行してください!!私たちのアプリは以前と同じように動作しますが、NgZone は必要ありません。 ?

これは完璧ですが、おそらくデフォルトでゾーンレスを作成したいと思います。心配ない; Angular CLI を使用すると、フラグを使用してこれを行うことができます。

デフォルトでゾーンレスアプリを作成しますか?

Angular CLI を使用してゾーンレス アプリを直接作成し、--experimental-zoneless フラグを使用して新しいプロジェクトを作成します。

ng new fastweb --experimental-zoneless

--experimental-zoneless フラグは、すぐに使用できるゾーンレス プロジェクトをセットアップし、Angular ゾーンなしで動作するように構成します。

残念ながら、Angular 19.0.1 では、npm uninstallzonejs を実行して「zone.js」パッケージを手動で削除する必要があります

その後、Angular 19 でゾーンレス アプリを構築する準備が整いました!

要約

zone.js の既存のアプリケーションを削除する方法、または CLI フラグを使用してデフォルトで作成する方法を学びました。ZoneJS を使用せずにアプリの構築を始めていただければ幸いです。 ?

ソースコード: https://github.com/danywalls/zoneless-angular-app

以上がAngular と ZoneLessの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。