如何在Angular 8应用程序中支持Internet Explorer? [英] How do I support Internet Explorer in an Angular 8 application?

问题描述

当我使用Angular CLI(8.0.0)生成项目时，运行ng serve，在Internet Explorer中打开应用程序，然后出现空白屏幕.

When I generate a project with Angular CLI (8.0.0), I run ng serve, open the application up in Internet Explorer and I am presented with a blank screen.

我查看了polyfills.ts文件，但未注释以下行:

I had a look at the polyfills.ts files and I uncommented the following lines:

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

我也删除了所有core.js导入，因为Angular 8直接支持core.js 3.0.

I've also removed all core.js imports as Angular 8 supports core.js 3.0 directly.

我也跑过npm i.

package.json:

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:

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

浏览器列表:

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

Internet Explorer(11)中的控制台显示以下错误:

The console in Internet Explorer (11) shows the following errors:

polyfills.js: Syntax error (3168, 5) (第3168行开始)-> class Zone {

polyfills.js: Syntax error (3168, 5) (line 3168 beginning) -> class Zone {

vendor.js: Syntax error (156, 1) (第156行开始)-> class PlatformLocation {

vendor.js: Syntax error (156, 1) (line 156 beginning) -> class PlatformLocation {

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

main.ts: Syntax error (95, 20) (points to the AppComponent)

我还需要做什么?

推荐答案

根据此问题回复

您需要执行以下步骤

1. 在tsconfig.json旁边创建一个具有以下内容的新tsconfig tsconfig.es5.json

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

1. 在angular.json 在projects:yourAppName:architect:build:configurations下，添加

1. In angular.json Under projects:yourAppName:architect:build:configurations, add

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

和projects:yourAppName:architect:serve:configurations添加

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

请记住将 app:build:es5 中的 yourAppName 更改为 yourAppName ！

完整路径如下所示

"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

这篇关于如何在Angular 8应用程序中支持Internet Explorer?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！