angular

これは、制御フローブロックのルートノードとなっている SVG または MathML 要素に影響する Angular コンパイラのバグです。Angular は :svg:svg のような名前空間付きタグを生成するため、select="svg" のような ng-content タグセレクタに一致せず、その要素はデフォルトスロットに投影されます。

回避策: ルートの SVG または MathML 要素に ngProjectAs を追加してください。

@if (saving()) {
  <svg class="spinner" ngProjectAs="svg">...</svg>
} @else {
  <svg ngProjectAs="svg">...</svg>
}

MathML の場合は、次のようにします。

<math ngProjectAs="math">...</math>

同じ回避策は、@for、@switch、*ngIf のルートノードにも適用されます。属性セレクタとクラスセレクタは影響を受けません。恒久的な修正は Angular コンパイラの PR で提供されています。修正を含むリリースが利用可能になったら、Angular をアップグレードしてください。

原因: Angular 22 の JIT パス(ɵɵngDeclareComponent → convertDeclareComponentFacadeToMetadata)は、宣言されたライブラリのバージョンを無視して changeDetection をデフォルトで OnPush にしてしまいます。一方、AOT リンカーは Angular < 22 でコンパイルされたコンポーネントを正しく Default/Eager のまま保持します。v22 より前にパーシャルモードでコンパイルされたライブラリ(例: Angular 20.3 でコンパイルされた Kendo UI for Angular)は、markForCheck() を呼ばずにサブスクリプション内で状態を代入する場合があるため、JIT ベースのツール(Storybook、jest-preset-angular、Vitest、TestBed、ng serve --aot=false)ではビューが一切更新されません。AOT ビルドでは正常に動作します。回避策: ライブラリの宣言が評価される前に JIT コンパイラファサードにパッチを適用します(例: Storybook の preview 設定やテストのセットアップファイル内):

import '@angular/compiler';
import { ChangeDetectionStrategy } from '@angular/core';

const facade = (globalThis as any).ng?.ɵcompilerFacade;
const original = facade.compileComponentDeclaration.bind(facade);
facade.compileComponentDeclaration = (env: unknown, url: string, decl: any) => {
  const major = Number.parseInt(String(decl.version ?? '0').split('.')[0], 10);
  const patched =
    decl.changeDetection == null && major > 0 && major < 22
      ? { ...decl, changeDetection: ChangeDetectionStrategy.Eager }
      : decl;
  return original(env, url, patched);
};

別の方法として、ライブラリのコンポーネントで changeDetection: ChangeDetectionStrategy.Default を明示的に設定し、Angular 22 で再公開することもできます。修正の状況は angular/angular#71107 で追跡してください。

これは provideClientHydration(withI18nSupport()) に影響する既知の Angular のバグ (issue #71425) です。ICU 式 (例: {count, plural, ...}) を含む同じコンポーネントが1つのページに複数回出現すると、サーバーがハイドレーションデータを重複排除するため、両方のインスタンスが同じ ngh オブジェクトを共有することになります。その後クライアントが shift() で共有された ICU ケースキューを変更するため、最初のインスタンスのみが正しくハイドレートされ、後続のインスタンスは ICU コンテンツを2回レンダリングするか (production)、ASSERTION ERROR: expected matching nodeType [Expected=> 8 == 3 <=Actual] をスローします (dev モード)。

**回避策:** ICU 式を制御フローと個別の i18n メッセージに置き換えてください:

@if (count === 1) {
  <ng-container i18n>1 item</ng-container>
} @else {
  <ng-container i18n>{{ count }} items</ng-container>
}

これにより、共有 ICU ケースキューが完全に回避されます。このバグは Angular 18.2 から少なくとも 21.2/22.x まで存在するため、アップグレードしても解決しません。修正がリリースされるまで回避策を使用してください (提案されている修正は、共有されたシリアライズ済みデータを変更する代わりに [...caseQueue] でケースキューをコピーするものです)。

NG0904は、<iframe [src]>のようなリソースURLプロパティにプレーンな文字列がバインドされると発生します。リソースURLに対してはsanitize(SecurityContext.URL, url)を呼び出すだけでは不十分です。Angularは明示的に信頼されたSafeResourceUrlを必要とします。

bypassSecurityTrustResourceUrlを使って修正します:

import { Component, inject } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `<iframe [src]="trustedUrl"></iframe>`,
})
export class App {
  readonly url = 'data:image/svg+xml;base64,...';
  private readonly sanitizer = inject(DomSanitizer);
  readonly trustedUrl: SafeResourceUrl =
    this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}

これは、特にdata: URLやユーザーが提供するURLなど、信頼できるURLにのみ使用してください。信頼できない入力については、許可リスト（allowlist）で検証するか、リソースURLにバインドしないでください。

これは Angular DevTools のルートハイライトに関する既知のバグです。/posts/1 のようなネストされた URL を表示しているとき、ルートルート / が実際のアクティブなルートではないにもかかわらず、誤ってアクティブとしてマークされます。この問題は angular/angular#65037 で修正されました。

解決するには：
1. Angular DevTools ブラウザ拡張機能を更新してください。
- Chrome/Edge：chrome://extensions を開き、デベロッパーモードを有効にし、**更新**をクリックしてから、DevTools を開き直します。
- Firefox：about:addons から Angular DevTools を更新します。
2. DevTools をローカルで実行している場合は、最新のコードを取得して再ビルドしてください：

git pull origin main
   npm install
   npm start

あるいは、PR #65037 を cherry-pick またはマージしてください。

アプリケーションのルーティングを変更する必要はありません。更新が完了するまでは、/ のアクティブバッジは表示上のみのバグとして扱い、Router.url またはルーターイベントで現在のルートを確認してください。