AngularアプリケーションをIE11で動作させる場合の注意点

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

Ignite UI for AngularをIE11で利用する際の注意点

上記に加え、バージョン6.1.3以降のデータグリッドをIE11でご利用いただく場合は、ES7ポリフィルの設定を追加いただく必要があります。下記のコードをigx-gridを使用するコンポーネント、あるいは、モジュールに組み込んでください。

import 'core-js/es7/object';

GitHub – Ignite UI for Angular – 6.1.3 リリースノート

インフラジスティックスのIE11サポートについて

インフラジスティックスは多くのお客様がIE11をはじめとしたレガシーブラウザーを現在もご利用されていることを認識いたしております。今後のサポートについては、お客様、市場における利用率、ブラウザー提供元のサポート状況を注視した上で対応を決定いたします。

ただし、Web技術はここ数年例がないほど短いスパンで進化しているため、競争力を確保するためにもモダンブラウザーへの移行を強くお勧めいたします。

参考情報:

インフラジスティックス - サポート環境
日本マイクロソフト株式会社 – Internet Explorer サポートチーム Blog

ご不明な点がございましたら弊社開発サポートまでご連絡ください。