angular-zoneless

Angular Zoneless

バージョン： Angular 19 以降（2025） タグ： Zoneless、変更検知、Signals、リアクティビティ

参考資料： Zoneless ガイド • Signals

API の変更

このセクションでは、最近のバージョン固有の API の変更について説明します。

• 新機能：provideZonelessChangeDetection — Zoneless モードを有効にします ソース

• 新機能：afterNextRender — zone.js を使わずに、レンダリング後にコードを実行します

• 新機能：Experimental Zoneless — Angular 17 から利用可能で、Angular 19 以降で安定版です

• 新機能：signal() + computed() — zone.js なしで動作します

ベストプラクティス

• Zoneless の変更検知を有効にします

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection()
  ]
};

• リアクティビティにはシグナルを使用します

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <p>Count: {{ count() }}</p>
    <p>Double: {{ double() }}</p>
  `
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}

• DOM 操作には afterNextRender を使用します

constructor() {
  afterNextRender(() => {
    // Runs after rendering, outside zone
    this.initChart();
  });
}

• 繰り返し行う操作には afterRender を使用します

constructor() {
  afterRender(() => {
    // Runs after every render
  });
}

• zone.js を使わずに非同期処理を扱います

@Component({
  template: `
    @if (data$ | async; as data) {
      {{ data.name }}
    }
  `
})
export class AsyncComponent {
  data$ = from(fetch('/api/data')).pipe(
    share()
  );
}

• 必要に応じて ChangeDetectorRef を手動で使用します

constructor(private cdr: ChangeDetectorRef) {}

update() {
  this.value = newValue;
  this.cdr.markForCheck();
}

• polyfills から zone.js を削除します

// polyfills.ts
// Remove or comment out zone.js import
// import 'zone.js';

• リアクティブではない読み取りには untracked を使用します

import { untracked } from '@angular/core';

ngOnInit() {
  // Read without creating dependency
  const value = untracked(() => this.signal());
}

• ブラウザーイベントを処理します

@HostListener('click')
onClick() {
  // Works without zone.js
  this.count.update(c => c + 1);
}

• Zoneless モードでテストします

TestBed.configureTestingModule({
  providers: [
    provideZonelessChangeDetection()
  ]
});