[解決済み] Angular 8アプリケーションでInternet Explorerをサポートするにはどうしたらいいですか？

質問

Angular CLI (8.0.0)でプロジェクトを生成する際、以下のように実行します。 ng serve を実行し、Internet Explorerでアプリケーションを開くと、空白の画面が表示されます。

を見てみましたが polyfills.ts ファイルを見て、以下の行をアンコメントしました。

    import 'classlist.js';
    import 'web-animations-js';

Angular 8はcore.js 3.0を直接サポートしているので、core.jsのインポートもすべて削除しています。

また npm i .

package.json。

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "classlist.js": "^1.1.20150312",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

tsconfig.jsonを使用します。

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

EDITです。

ブラウザリスト

# 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
IE 9-11 # For IE 9-11 support, remove 'not'.

EDIT 2:

Internet Explorer(11)のコンソールでは、以下のようなエラーが表示されます。

polyfills.js: Syntax error (3168, 5) (3168行目冒頭) -> class Zone {

vendor.js。 Syntax error (156, 1) (156行目冒頭) -> class PlatformLocation {

main.ts: Syntax error (95, 20) (AppComponentを指す)

他に必要なものは？

どのように解決するのですか？

によると この問題の回答

以下の手順を踏む必要があります。

1. 新しいtsconfigを作成します。 tsconfig.es5.json の隣に、以下の内容でtsconfig.jsonを作成します。

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

1. で angular.json 下 projects:yourAppName:architect:build:configurations を追加します。

"es5": {
      "tsConfig": "./tsconfig.es5.json"
    }

と projects:yourAppName:architect:serve:configurations を追加する

    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }

を変更することを忘れないでください。 yourAppName を app:build:es5 から あなたのAppName !

フルパスは以下の通り

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig.es5.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }
  }
},

1. この設定で、以下のコマンドを使用してサーブを実行します。

ng serve --configuration es5