Angular and Internet Explorer

Supporting Internet Explorer with Angular 8 and Angular 9

Medium Blog の Angular and Internet Explorer の翻訳です

この記事では、Angular 8.x または Angular 9.x アプリケーションのブラウザとしてのInternet Explorer のサポートについて説明します。
Angular の以前のバージョンを使用している場合は、このトピックに関する以前の記事を参照してください。

この記事では、以下を紹介します。

Angular CLI アプリケーションの開始
Internet Explorer のエラー
実稼働環境で、 Internet Explorer をサポートするために必要な手順
開発で、 Internet Explorerをサポートする方法

動作させたいだけで、詳細を気にしない場合は、「対処法」セクションまでスクロールダウンできます。

入門

まず、Angular CLI を使用して、スターターアプリケーションを生成および起動します。

$ ng new ie-test
$ cd ie-test
$ ng serve

http://localhost:4200 で基本的に、 Internet Explorer を除くすべてのブラウザーで表示します。そして、私たち全員が知っている基本的な Angular CLI アプリケーションを見れます。 Firefox では、次のようになります。

現象

しかし、 Internet Explorer を使うと、次のように表示されます。

少なくともタイトル部が正しいため、何かを動作しているようです。
ブラウザコンソールを開いてページを再ロードすると、次のようなメッセージが表示されます。
Unspecified error

対処法

Internet Explorerを機能させるには、次の手順を実行する必要があります。

polyfill.ts ファイルのインポートのコメントを外します。
いくつかの npm パッケージをインストールします。
browserslist ファイルを変更します。

以下は、各ステップの詳細です。

Polyfill インポート

まず、IDEまたはテキストエディターでポリフィルファイルを開きます。
ie-test\src\polyfills.ts

コメントを解除出来るコメントアウトされた行が2つあります。

// import 'classlist.js';  // Run `npm install --save classlist.js`.
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

npm パッケージのインストール

コメントにいくつかの npm install コマンドがあることに注意してください。
以下を実行する必要があります。

$ npm install --save classlist.js
$ npm install --save web-animations-js

ブラウザリストの変更

IDEまたはテキストエディターで、 browserslist ファイルを開きます。
ie-test\browserslist

Angular CLI によって作成されるデフォルトファイルは次のようになります。

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

not を削除して、最後の行を変更する必要があります。
変更を行った後、最後の行は次のようになります。

IE 9-11 # For IE 9-11 support, remove 'not'.

本番環境の Internet Explorer

今のところ、Internet Explorerはng serveで動作しません。
さらにいくつかの手順が必要です。

ただし、実稼働環境で、 Internet Explorer をサポートすることだけが必要な場合は、
前の手順で十分です。
自分でプロダクションビルドを実行し、 dist/ie-test フォルダを Web サーバーに配置することができます。

$ ng build --prod

ビルドを実行すると、 ES5 bundles が生成されることに注意してください。


$\ie-test> ng build --prod
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.chunk {0} runtime-es2015.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.edb2fcf2778e7bf1d426.js (runtime) 1.45 kB [entry] [rendered]
chunk {2} polyfills-es2015.2987770fde9daa1d8a2e.js (polyfills) 36.4 kB [initial] [rendered]
chunk {3} polyfills-es5.ef4b1e1fc703b3ff76e3.js (polyfills-es5) 123 kB [initial] [rendered]
chunk {1} main-es2015.77c5c44e21b70d1ec41a.js (main) 169 kB [initial] [rendered]
chunk {1} main-es5.77c5c44e21b70d1ec41a.js (main) 190 kB [initial] [rendered]
chunk {4} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]
Date: 2019-12-03T23:28:06.809Z - Hash: 89a94328c69b68370cb8 - Time: 43148ms

これで、Webサーバーを使用してテストできます。
たとえば、 npx で local-web-server を使用します。
ところで、npxを使用したことがない場合は、 KatMarchán の記事をご覧ください。

npx の紹介: npm package runner

ビルド後、実行できます。

$ cd .\dist\ie-test\
$ npx local-web-server

これで、 Angular アプリケーション起動します。
Internet Explorer で見ると、以下が表示されます。

注意

それでもアプリケーションが表示されない場合は、互換表示設定の互換表示でイントラネットサイトの表示をオフにする必要がある場合があります。

開発中の Internet Explorer

次を使用する場合：

$ ng serve

空白の Internet Explorer が引き続き表示されます。
これは、 ng serve が ES5 bundle を自動的に生成しないためです。

これを構成するには、いくつかの方法があります。

tsconfig.json ファイルを変更
ES5 構成の作成

tsconfig.json ファイルを変更

tsconfig.json ファイルは、 Angular Workspace のルートにあります。
IDE またはテキストエディターで開くと、次のように表示されます。

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

注意する行： target: es2015 に注目してください。
es5 に変更できます。これは次のようになります。

"target": "es5",

ng serve を実行します。

http://localhost:4200 で、 Internet Explorer が開き、正しく表示されます。

ES5 構成の作成

ng serve で Internet Explorer を使用できるように tsconfig.json を直接変更するという考えが気に入らない場合は、 ES5 構成を作成できます。

Ali Kamalizade は、自分の記事でそれを説明するのにかなり良い仕事をしたので、ここではこれについて詳しく説明しません。
How To Fix Your Angular App When It’s Not Working in IE11

まとめ

polyfills.ts ファイルと browserslist ファイルの場所を覚えているだけであれば、 Angular で Internet Explorer をサポートするのは簡単です。

Angular and Internet Explorer ~Supporting Internet Explorer with Angular 8 and Angular 9~ 翻訳