[英]Angular 4 app is not working on first load in microsoft edge and ie11
[英]Angular 4 app not working on IE11 and edge
我正在开发角度4应用程序,并且它在除IE11和边缘之外的所有浏览器上工作正常,我检查解决方案并添加了es15支持并添加了polyfill以支持IE但它仍然无法正常工作。
问题:第一次在IE上加载并在几次刷新后加载但未完全加载。
我已经完成了这里提到的polyfill修复
任何帮助都很明显
谢谢
在尝试了不同的方法和模块之后,我最终得到了以下解决方案,以便在所有浏览器上兼容angular 4 app。
* 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;
}
您可能需要一些其他的polyfill,具体取决于您在项目中安装的模块,因为有些图表和图形有时需要一些额外的配置。
边缘问题我有同样的问题。 添加所有必要的polyfill后,我的网站没有加载边缘。
我发现[hidden]
属性在边缘网页上呈现内容时有一些问题(因为它在Google Chrome,Mozilla,IE中运行得非常好),并且删除了在Edge中加载的属性网站。
所以不使用[hidden]
而是使用*ngIf
显示和隐藏内容。
我发现这个在微软边缘不起作用的可能原因是: -
隐藏的全局属性是一个布尔属性,表示该元素尚未或不再相关。 因此,浏览器不会使用隐藏属性集渲染元素。
浏览器将“ display: none
”样式附加到具有隐藏属性的元素。 当组件加载时,样式“display:none”不会自动更新。
并且*ngIf
不显示/隐藏基于隐藏的显示属性的元素。 它的工作原理是添加和删除DOM中的元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.