角度项目未在IE上显示(10,11和Edge)

Question

我正在做一个有角度的项目。网页在Chrome和Mozilla上显示得很好，但是当涉及到IE 11时，什么都没有，页面被锁定在加载页面上。 IE11.0.9600.19100 IE 11上的错误消息我什至无法追踪它调试错误为空 我有以下配置：

package.json：

"webpack": "^3.12.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^2.7.1",

tsconfig.json：

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noEmitHelpers": true,
"strictNullChecks": false,
"lib": [
"es2015",
"dom"
],
"typeRoots": [
"node_modules/@types"
],
"types": [
"jasmine",
"node",
"source-map",
"uglify-js",
"webpack"
],
"baseUrl": "./node_modules",
"paths": {
"ng-boosted": ["./src/index"]
}
}

polyfills.ts

// Polyfills
/** IE9, IE10 and IE11 requires all of the following polyfills. */
import 'core-js/es5/';
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';
import 'core-js/client/shim';
import 'reflect-metadata';
/** 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';
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
// Typescript emit helpers polyfill
import 'ts-helpers';
require('zone.js/dist/zone');
if ('production' === process.env.ENV) {
// Production
} else {
// Development
Error.stackTraceLimit = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}

我遵循了那些建议的角度配置 我在互联网上看到的一切都没有帮助。

下面是控制台在 IE 上显示的错误输出。

>     eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__ = __webpack_require__(499);n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_ssr_window__ = __webpack_require__(288);n/**n * Swiper 4.3.5n * Most modern mobile touch slider and framework with hardware accelerated transitionsn *
> http://www.idangero.us/swiper/n *n * Copyright 2014-2018 Vladimir
> Kharlampidin *n * Released under the MIT Licensen *n * Released
> on: July 31, 2018n */nnnnnconst Methods = {n  addClass:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["a" /* addClass */],n  removeClass: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["b" /* removeClass */],n  hasClass:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["c" /* hasClass */],n  toggleClass: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["d" /* toggleClass */],n  attr:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["e" /* attr */],n  removeAttr: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["f" /* removeAttr */],n  data:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["g" /* data */],n  transform: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["h" /* transform */],n  transition:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["i" /* transition */],n  on:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["j" /* on */],n  off: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["k" /* off */],n  trigger: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["l" /* trigger */],n  transitionEnd: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["m" /* transitionEnd */],n  outerWidth:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["n" /* outerWidth */],n  outerHeight:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["o" /* outerHeight */],n  offset:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["p" /* offset */],n  css: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["q" /* css */],n  each: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["r" /* each */],n  html: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["s" /* html */],n  text: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["t" /* text */],n  is: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["u" /* is */],n  index:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["v" /* index */],n  eq: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["w" /* eq */],n  append:
> __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__["x" /* append */],n  prepend:

Answer 1

在索引.html文件中添加以下行<head>部分：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

并取消注释src/polyfill.ts中的所有行

Answer 2

角度应用需要在 IE 中运行一些 polyfill。请查看此帖子。

https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9

Answer 3

我只是通过找到符合我的配置的正确版本来更新 Webpack 的版本。

"webpack": "3.0.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^2.4.1",
"webpack-md5-hash": "^0.0.5",
"webpack-merge": "^0.17.0"