Jam*_*ett 42 polyfills angular-cli angular angular8
当我使用Angular CLI（8.0.0）生成项目时，运行ng serve，在Internet Explorer中打开应用程序，然后出现空白屏幕。
我看了看polyfills.ts文件，并取消了以下几行的注释：
import 'classlist.js';
import 'web-animations-js';
我也删除了所有core.js导入，因为Angular 8直接支持core.js 3.0。
我也跑了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"
]
}
}
编辑：
浏览器列表：
# 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）
我还需要做什么？
小智 48
根据这个问题回复
您需要遵循以下步骤
tsconfig.es5.json使用以下内容在tsconfig.json旁边创建一个新的tsconfig{
"extends": "./tsconfig.json",
"compilerOptions": {
"target": "es5"
}
}
angular.json
下方projects:yourAppName:architect:build:configurations，添加"es5": {
"tsConfig": "./tsconfig.es5.json"
}
并projects:yourAppName:architect:serve:configurations添加
"es5": {
"browserTarget": "yourAppName:build:es5"
}
记得改yourAppName在应用：建筑：ES5到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"
}
}
},
ng serve --configuration es5
小智 14
Go to "tsconfig.json" and use target: "es5" instead of "target": "es2015",
target which is inside compileOnSave\compilerOptions
Dev*_*eva 12
------简单易行的方法
您需要更改 2 个文件，polyfills.ts并且tsconfig.json分别。
只需添加浏览器Polyfills在polyfills.ts
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/promise';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
并像这样tsconfig.json 将“目标”更改为 es5
"target": "es5",
代替
"target": "es2015",
小智 7
注意：我的原始回复来自Reddit（https://www.reddit.com/r/Angular2/comments/buup6a/）
检查您的tsconfig.json在升级到Angular 8时，对我来说目标已更改为es2015，因此使用ng serve时会遇到很多问题。编译时，dist文件夹同时具有es5和es2015版本。
基本上，进行生产编译将为IE11等新旧浏览器创建两个版本
为了在开发环境上测试IE11，我在angular.json中创建了一个开发环境，在其中指定了tsconfig的副本，我将该文件称为tsconfig.dev.json，其中目标设置为es5。运行ng s -c = dev然后瞧瞧！
为了完全支持 IE，我们必须从mdn-polyfills库中引入一组特殊的polyfill。
要安装它们，请使用
npm i -s mdn-polyfills
接下来将它们添加到 polyfills.ts 文件中
import 'mdn-polyfills/Object.assign';
import 'mdn-polyfills/Object.create';
import 'mdn-polyfills/Object.entries';
import 'mdn-polyfills/Array.from';
import 'mdn-polyfills/Array.of';
import 'mdn-polyfills/Array.prototype.find';
import 'mdn-polyfills/Array.prototype.forEach';
import 'mdn-polyfills/Array.prototype.filter';
import 'mdn-polyfills/Array.prototype.findIndex';
import 'mdn-polyfills/Array.prototype.includes';
import 'mdn-polyfills/String.prototype.includes';
import 'mdn-polyfills/String.prototype.repeat';
import 'mdn-polyfills/String.prototype.startsWith';
import 'mdn-polyfills/String.prototype.endsWith';
import 'mdn-polyfills/String.prototype.padStart';
import 'mdn-polyfills/String.prototype.padEnd';
import 'mdn-polyfills/Function.prototype.bind';
import 'mdn-polyfills/NodeList.prototype.forEach';
import 'mdn-polyfills/Element.prototype.closest';
import 'mdn-polyfills/Element.prototype.matches';
import 'mdn-polyfills/MouseEvent';
import 'mdn-polyfills/CustomEvent';
在此之后，您应该不再遇到 IE 中的许多问题。