Angular 4应用程序在IE11和edge上不工作

Question

我正在开发angular 4应用程序，它在除了IE11和edge之外的所有浏览器上都工作得很好，我检查了解决方案，添加了es15支持，并添加了多边形填充来支持IE，但它仍然不能正常工作。

问题: IE第一次不加载，刷新几次后加载，但没有完全加载。

我已经完成了前面提到的here的polyfill修复

任何帮助都是值得感激的。

谢谢

Answer 1

在尝试了不同的方法和模块后，我最终得到了以下解决方案，使angular 4应用程序在所有浏览器上都能兼容。

* BROWSER POLYFILLS
*/

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
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/es6/reflect';
import 'core-js/client/shim';

/** 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 to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/** ALL Firefox browsers require the following to support `@angular/animation`. **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone';  // Included with Angular CLI.

/***************************************************************************************************
* APPLICATION IMPORTS
*/

/* polyfill ie11 */
import 'core-js/es7/array';
import 'core-js/es7/reflect';

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// Run `npm install --save intl`.
import 'intl'; 
import 'intl/locale-data/complete.js';
import 'intl/locale-data/jsonp/en.js';

if (typeof SVGElement.prototype.contains == 'undefined') {
    SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
}

根据您在项目中安装的模块，您可能需要一些其他的polyfills，比如一些图表和图形，有时还需要一些额外的配置。

Answer 2

我对edge也有同样的问题。我的网站在添加了所有必要的多边形后没有在边缘加载。

我发现[hidden]属性在Edge中渲染网页内容时有一些问题(因为它在Google Chrome，Mozilla，IE中工作得很好)，并且在删除该属性后，在Edge中加载的网站绝对正常。

所以我使用*ngIf来显示和隐藏内容，而不是使用[hidden]。

而我发现这在Microsoft edge中不起作用的可能原因是：

hidden全局属性是一个布尔属性，表示元素还不相关或不再相关。因此，浏览器不会呈现具有隐藏属性集的元素。

浏览器将"display: none“样式附加到具有隐藏属性的元素。当组件加载时，样式"display: none“不会自动更新。

而且*ngIf不会像hidden那样根据显示属性来显示/隐藏元素。它通过在DOM中添加和删除元素来工作。