Angular 项目未在 IE（10,11 和 Edge）上显示

Question

我正在做一个 angular 项目。该网页在 Chrome 和 Mozilla 上显示良好，但是当涉及到 IE 11 时，什么都没有，页面被锁定在加载页面上。 IE11.0.9600.19100 Error message on IE 11 I can't even track it down debug error empty 我有以下配置：

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');

}

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

这是控制台在 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.5\n * Most modern mobile touch slider and framework with hardware accelerated transitions\n *
> http://www.idangero.us/swiper/\n *\n * Copyright 2014-2018 Vladimir
> Kharlampidi\n *\n * Released under the MIT License\n *\n * Released
> on: July 31, 2018\n */\n\n\n\n\nconst 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

在 index.html 文件的 <head> 部分添加以下行：

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

并取消注释 src/polyfill.ts

中的所有行

Answer 2

angular 应用程序需要一些 polyfill 才能在 IE 中运行。请检查此 post.

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"

Angular 项目未在 IE（10,11 和 Edge）上显示

Angular project not displaying on IE (10,11 and Edge)

internet-explorer

ecmascript-5

ecmascript-6

internet-explorer-11

angular