如何在 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'.

编辑 2:

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

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

polyfills.js:语法错误 (3168, 5)(第 3168 行开始)-> class Zone {

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

vendor.js:语法错误 (156, 1)(第 156 行开始)-> class PlatformLocation {

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

main.ts:语法错误 (95, 20)(指向 AppComponent)

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

我还需要做什么?

推荐答案

根据这个issue回复

您需要按照以下步骤操作

You need to follow the following steps

1. 创建一个新的 tsconfig tsconfig.es5.json 在 tsconfig.json 旁边，内容如下

1. Create a new tsconfig tsconfig.es5.json next to tsconfig.json with the below contents

{
 "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屋！