web-dev-qa-db-ja.com

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"
    ]
  }
}
_

編集：

browserlists：

_# 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'.
_

編集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を指す）

他に何をする必要がありますか？

angularangular-clipolyfillsangular8
64
James Barrett

これはとてもクールですAngular differential-loading）と呼ばれる新機能

<script src=“runtime-es2015.858f8dd898b75fe86926.js” type=“module”></script>
<script src=“polyfills-es2015.e954256595c973372414.js” type=“module”></script>
<script src=“runtime-es5.741402d1d47331ce975c.js” nomodule></script>
<script src=“polyfills-es5.405730e5ac8f727bd7d7.js” nomodule></script>
<script src=“main-es2015.63808232910db02f6170.js” type=“module”></script>
<script src=“main-es5.2cc74ace5dd8b3ac2622.js” nomodule></script>

上記のビルドフォルダーのindex.htmlが表示される場合、各jsには2つのバージョンがあります。

  • 1つはes2015で、最新のブラウザの場合はtype="module"attribute
  • もう1つは、遅延ブラウザ用のnomodule属性を持つes5バージョンです。

したがって、Angular cliは製品で正常に生成します。ただし、ng serveをローカルから実行する場合は、ng serveがtarget: es5を含むtsconfigファイル

0
Yuchao Wu