Angular 18 Polyfills警告の解決方法

Angular 18にアップグレード後、ng serve実行時に次の警告が表示される場合:

▲ [WARNING] Polyfill for "@angular/localize/init" was added automatically. [plugin angular-polyfills]
将来この機能は削除されます。"angular.json"の"polyfills"セクションにポリフィルを追加してください

この警告はAngularのポリフィル設定変更によるもので、以下で完全解決します。

警告発生時の典型的な設定状態

// angular.json
"build": {
  "builder": "@angular-devkit/build-angular:browser-esbuild",
  "options": {
    "polyfills": [
      "src/polyfills.ts" // ポリフィルファイルを指定
    ],
    ...
  }
}

// src/polyfills.ts
import '@angular/localize/init'; // 警告対象のインポート

---

推奨解決方法

1. angular.jsonを修正

   "polyfills": [
     "src/polyfills.ts",
   + "@angular/localize/init" // 直接追加
   ]

2. polyfills.tsからインポートを削除

   - import '@angular/localize/init';

3. ファイルが空になったら削除

   rm src/polyfills.ts  # 他のインポートが無い場合

動作確認

変更後にng serveを再実行すると警告が消えます。Angular 18.0.3以降で検証済みです。

注意点

@angular/localizeパッケージが未インストールの場合:

npm install @angular/localize

---

補足: ライブラリ開発時の例外対応

Angularライブラリ開発中でpolyfills設定が無い場合:

1. 型参照に変更

   /// <reference types="@angular/localize" />

2. tsconfig.jsonを更新

   {
     "compilerOptions": {
       "types": ["@angular/localize"] // 型定義を追加
     }
   }

参考: Angular公式i18nガイド

ベストプラクティス

• 重要: 警告は将来のAngularバージョンで機能停止する予告です。早急に対処を
• ポリフィルファイル(polyfills.ts)は非推奨傾向。angular.json直指定が安定解
• @angular/localize/initは国際化(i18n)を利用する場合のみ必要
• Angular 19以降では警告がエラーに昇格する可能性あり

以上のように設定を更新することで、警告が解消され将来のAngularバージョンに対応可能な状態になります。