web-dev-qa-db-ja.com

Angular 8をIE11と互換性のあるものにするにはどうすればよいですか？

私はAngular 8をng updateを使用して8にアップグレードしました。それは、マイグレーションスクリプトを実行し、（とりわけ）polyfills.tsのes6/es7インポートを削除しました。私が読んだものから、 Angularは、古いブラウザー（IE11を含む）用の特別なビルドを作成し、ポリフィルについて心配する必要はありませんか？代わりにbrowserlistをnot IE 9-10に更新しましたのnot IE 9-11から（私は推測）、適切なポリフィルを構築する必要があるというヒント。

残念ながら、ng buildを実行すると、ポリフィル関連のエラーが発生します。 Reflect.getMetadata is not a functionおよびObject doesn't support property or method 'includes'。 reflectとarrayのインポートをポリフィルに戻し、それらのエラーを回避しようとしましたが、他のエラーが発生しました。どうしたんだ？ポリフィルを含めるかどうか

Angular 8をIE11で動作させるにはどうすればよいですか？

angularangular-clipolyfills
12
adamdport

IE 11をAngular 8で動作させる1つの方法は、無効にすることです差分読み込み。

以下をせよ：

  1. 更新tsconfig.jsonと"target": "es5"
  2. 更新polyfills.tsとimport 'core-js'; // core-js@^3.1.4
10
Christopher Taleck

IE11などのES5ブラウザーやChromeやFirefoxなどの最新のES2015 +ブラウザーにアプリを提供する場合は、追加のビルド構成をangular.jsonに追加して、アプリのES5バンドルを提供します。

  1. Angular.jsonのarchitectセクションに新しい「es5」設定を追加します。
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "es5" : {
              "tsConfig": "tsconfig.app.es5.json"
            }
          }
        },
        "serve": {
          "configurations": {
            "es5": {
              "browserTarget": "my-app:build:es5"
}}}}}}}
  1. tsconfig.app.es5.jsonとともにangular.jsonを作成します。
{
    "extends": "./tsconfig.app.json",
    "compilerOptions": {
        "target": "es5"
    }
}
  1. browserslistを更新してIE 11のサポートを有効にします。browserslistがangular.jsonファイルとともにアプリのルートディレクトリにあることを確認してください。例：
not IE 9-10 # For IE 9-11 support, remove 'not'.
IE 11
  1. 手順1で作成したES5設定を使用するには、新しい開始スクリプトをpackage.jsonに追加します。
"scripts": {
  "build": "ng build",
  "buildES5": "ng build --configuration=es5",
  "start": "ng serve",
  "startES5": "ng serve --configuration=es5",
}

これで、ES5のみをサポートするレガシーブラウザーまたはES2015 +をサポートする最新のブラウザー用にアプリを作成して提供できます。

  • npm run buildは、最新のブラウザ用にアプリを構築します
  • npm run buildES5はレガシーブラウザ用のアプリを構築します
  • npm run startは、最新のブラウザー向けにアプリを作成して提供します
  • npm run startES5は、レガシーブラウザ用のアプリを構築して提供します
3
Brian De Sousa

お望みならば ng serveデフォルトで「es5」のアプリをビルドします。

angular.json

"architect": {
  "build": {
    ...
    "configurations": {
      "development": {
        "tsConfig": "tsconfig-es5.app.json"
      },
      ...
    }
  },
  "serve": {
    ...
    "options": {
      "browserTarget": "bludesk-web:build:development"
    },
    ...
  }

ブラウザリスト

...
IE 11
not IE 9-10

tsconfig-es5.app.json

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

次のようにして、polyfill.tsのIE 11に関する問題を解決しました：

  1. npm install --save web-animations-jsを実行します
  2. import 'web-animations-js'内の行polyfill.tsのコメントを外します
  3. targetの値をtsconfig.json内の'es2015'から 'es5'に変更します。

IE 11には 'es5'が必要です。

0
sosNiLa