AngularにおけるIE11サポートについて

Angularは、Webプラットフォームにおける新しい技術を用いて構築されています。IE11などのレガシーブラウザーもサポートしていますが、Angularアプリケーションの実行にはポリフィルと呼ばれるIE11では対応していない機能を補完する設定が必要となります。

Angular 公式サイト – ブラウザーサポート

Angular 8以降でIE11を利用する場合は、こちらのGitHub issueに従い設定を行う必要があります。以下は該当issueの日本語訳です。

1. 新たに、ECMAScript 5をターゲットとするtsconfigを作成する。例: tsconfig-es5.app.json

{
 "extends": "./tsconfig.app.json",
 "compilerOptions": {
     "target": "es5"
  }
}

2. angular.jsonファイルを開き、buildノードに設定セクションの追加、serveセクションにターゲットの追加をそれぞれ行う。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig-es5.app.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "app:build:es5"
    }
  }
},

3. ng serve時に上記の設定を指定する

ng serve --configuration es5