1. 新建.browserslist文件内容
内容如下:
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-10 # For IE 9-10 support, remove 'not'.
IE 11
2. 修改polyfills.ts 文件
代码如下:
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'babel-polyfill';
import 'core-js/shim';
import 'core-js/es6/symbol';
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';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
import '@webcomponents/webcomponentsjs/webcomponents-bundle';
import '@webcomponents/webcomponentsjs/webcomponents-loader';
3. 在main.js顶部再次加载babel-polyfill
import 'babel-polyfill';
3. 修改main.ts
在main.ts
顶部加上以下代码
import 'babel-polyfill';
4.package.json新增依赖
"dependencies": {
"@webcomponents/webcomponentsjs": "^2.5.0",
"web-animations-js": "^2.3.2",
"classlist.js": "^1.1.20150312",
"babel-polyfill": "^6.26.0"
}
5.修改tsconfig.json文件
以下是我的配置,每个项目的配置不一样,主要是把target
的值改为es5
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es5", // 重点
"allowSyntheticDefaultImports": true,
"typeRoots": [
"node_modules/@types"
],
"paths": {
"crypto": [
"node_modules/crypto-js"
]
},
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
6. IE11开发环境打开页面后刷新报错原因
是 webpack-dev-server
版本的原因,和angular无关,只是开发环境会出现这个问题,生产环境不会出现这个问题,可以 webpack-dev-server
改成2.11.1版本并设置 ng serve --watch 修复此问题。
- Published webpack-dev-server@2.11.1 with the fix.
- package.json 加--watch "start": "ng serve --watch --proxy-config proxy.config.json --host=0.0.0.0 --port=4200 ",
7. ERROR Error: Uncaught(in promise):Error:SecurityError
7.1 解决方法1:配置ie浏览器
这很好用,但是可以破坏公司型局域网上的某些类型的通过验证。 除了确保Internet区域不是本地主机(如上述答案)外,请确保如果使用https,则应使用wss。 在其他浏览器中这不是问题,但IE有点挑剔。 stackoverflow.com/questions/2…