Angular 8 のプロジェクトを IE11 で実行・表示する

Angular 7 までは、polyfill を使うことで IE11 でも Angular アプリケーションを実行することができました。ただし、Angular 8 では、Angular 7 と同じように polyfill を使う方法では IE11 で動作させることができません。２つの方法がありますので、それぞれ見ていきましょう。また、それぞれの方法に対応するサンプルも用意していますので、ダウンロードして動作を確認することもできます。

方法１

アプリケーションのコンパイルターゲットを es5 に変更します。

Angular 8 では、TypeScript のコンパイルターゲットを es5 にすることで対応することができます。 tsconfig.json の target プロパティに "es5" を指定します。

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

この方法であれば、アプリケーションを "ng serve" で実行することができます。
上記の設定を行ったサンプルです。

方法２

es5 でコンパイルするオプションを用意し、アプリケーション実行時にそのオプションを選択します。

tsconfig.app.json と同じフォルダに、tsconfig-es5.app.json を生成します。

tsconfig-es5.app.json

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

angular.json を編集します。13 - 15 行目と 24 - 26 行目を追記します。24 – 26 行目の設定は、"プロジェクト名:build:es5" です。

angular.json

{
  ...
  "projects": {
    "angular8-ie11-two": {
      ...
      "architect": {
        "build": {
          ...
          "configurations": {
            "production": {
              ...
            },
            "es5": {
              "tsConfig": "./tsconfig-es5.app.json"
            }
          }
        },
        "serve": {
          ...
          "configurations": {
            "production": {
              "browserTarget": "angular8-ie11-two:build:production"
            },
            "es5": {
              "browserTarget": "angular8-ie11-two:build:es5"
            }
          }
        },
        ...
      }
    }
  },
  ...
}

アプリケーションの実行には、次のコマンドを実行します。

ng serve --configuration es5

実行結果

IE11 で Angular アプリケーションを動かすことができました。

上記の設定を行ったサンプルです。