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

# Angular and Internet Explorer
Supporting Internet Explorer with Angular 8 and Angular 9
![ng-IE11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28875/d9c93ade-4227-ea7a-93de-e16d1448cb8a.png)

[Medium Blog](https://medium.com/) の [Angular and Internet Explorer](https://medium.com/angular-in-depth/angular-and-internet-explorer-a6e4b5a5dae1) の翻訳です

この記事では、**Angular 8.x** または **Angular 9.x** アプリケーションのブラウザとしてのInternet Explorer のサポートについて説明します。 
Angular の以前のバージョンを使用している場合は、[このトピックに関する以前の記事を参照してください。](https://medium.com/angular-in-depth/angular-and-internet-explorer-5e59bb6fb4e9)

#### この記事では、以下を紹介します。
- **Angular CLI** アプリケーションの開始
- **Internet Explorer** のエラー
- **実稼働環境で、** Internet Explorer をサポートするために必要な手順
- **開発で、** Internet Explorerをサポートする方法


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

## 入門

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

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

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

![ng-firefox.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28875/09880a33-9b51-7c31-14ff-21f67dc9acf7.png)

## 現象

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

![ng-IE11-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28875/319f7f21-f3db-0bc3-75d2-6599e661f9a7.png)

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

![ng-IE11-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28875/fcd7b9c7-0c17-80cd-a6d1-a6b76c62a99b.png)


## 対処法

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

1. **polyfill.ts** ファイルのインポートのコメントを外します。
1. いくつかの **npm** パッケージをインストールします。
1. **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** コマンドがあることに注意してください。 
以下を実行する必要があります。

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

#### ブラウザリストの変更
IDEまたはテキストエディターで、 browserslist ファイルを開きます。
`ie-test\browserslist`

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

```bash
# 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** を削除して、最後の行を変更する必要があります。 
変更を行った後、最後の行は次のようになります。

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

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

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

```bash
$ ng build --prod
```

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

```bash

$\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](https://www.npmjs.com/package/local-web-server) を使用します。 
ところで、npxを使用したことがない場合は、 [KatMarchán](https://medium.com/u/6a658354eb94?source=post_page-----a6e4b5a5dae1----------------------) の記事をご覧ください。

[npx の紹介: npm package runner](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b)

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

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

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

![ng-IE11-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28875/71933b25-cb31-1104-6800-714c78b12756.png)

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

![ng-IE11-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28875/407d2ac7-64c2-47f5-eec1-1e2e763a4d6d.png)

### 開発中の Internet Explorer

次を使用する場合：

```bash
$ ng serve
```

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

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

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

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


```JSON
{
  "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 に変更できます。 これは次のようになります。

```JSON
"target": "es5",
```

`ng serve` を実行します。

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

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

[Ali Kamalizade](https://medium.com/u/3a534b5053e6?source=post_page-----a6e4b5a5dae1----------------------) は、自分の記事でそれを説明するのにかなり良い仕事をしたので、ここではこれについて詳しく説明しません。
[How To Fix Your Angular App When It’s Not Working in IE11](https://medium.com/better-programming/how-to-fix-your-angular-app-when-its-not-working-in-ie11-eb24cb6d9920)

### まとめ

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