web-dev-qa-db-fra.com

Comment prendre en charge Internet Explorer dans une application Angular 8?

Lorsque je génère un projet avec Angular CLI (8.0.0), j'exécute ng serve, J'ouvre l'application dans Internet Explorer et un écran vide s'affiche.

J'ai jeté un coup d'œil aux fichiers polyfills.ts Et j'ai commenté les lignes suivantes:

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

J'ai également supprimé toutes les importations core.js car Angular 8 prend directement en charge core.js 3.0.

J'ai également couru 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"
    ]
  }
}

MODIFIER:

listes de navigateurs:

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

MODIFIER 2:

La console dans Internet Explorer (11) affiche les erreurs suivantes:

polyfills.js: Syntax error (3168, 5) (début de la ligne 3168) -> class Zone {

vendor.js: Syntax error (156, 1) (ligne 156 début) -> class PlatformLocation {

main.ts: Syntax error (95, 20) (pointe vers l'AppComponent)

Que dois-je faire d'autre?

angularangular-clipolyfillsangular8
64
James Barrett

Ceci est une très cool Angular nouvelle fonctionnalité appelée chargement différentiel

<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>

Si vous voyez ci-dessus index.html du dossier de construction, chaque js a deux versions:

  • L'un est es2015 avec type="module"attribut pour les navigateurs modernes
  • Un autre est la version es5 avec l'attribut nomodule pour les navigateurs de latence.

Par conséquent, Angular cli le générera gracieusement sur prod. Mais si vous voulez exécuter ng serve du local, alors vous devez vous assurer manuellement ng serve s'exécute à partir d'un fichier tsconfig qui a target: es5

0
Yuchao Wu