Угловой проект не отображается в IE (10,11 и Edge) - PullRequest
Новая
       22

Угловой проект не отображается в IE (10,11 и Edge)

0 голосов
/ 07 сентября 2018

Я работаю над угловым проектом. Веб-страница хорошо отображается в 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.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:

Ответы [ 3 ]

0 голосов
/ 07 сентября 2018

Для того, чтобы угловое приложение могло работать в IE, требуется несколько полифилов. Пожалуйста, проверьте этот пост.

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

0 голосов
/ 08 ноября 2018

Я просто обновляю версию 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"
0 голосов
/ 07 сентября 2018

Добавьте строку ниже в файле index.html в разделе <head>:

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

, а также раскомментируйте всю строку из вашего src/polyfill.ts

...