Angular 4 app not working on IE11 and edge

Question

I am working on angular 4 app and its working fine on all browsers except IE11 and edge, I check for solutions and added es15 support and added polyfills to support IE but its still not working properly.

Issue : Not loading at first time on IE and loads after couple of refreshes but not fully.

I already have done the polyfill fixes as mentioned here

Any help is appreciable

Thanks

Answer 1

After trying different methods and modules I ended up with following solution to make angular 4 app compatible on all browsers.

* 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;
}

You might need some other polyfills depending upon modules you have installed on your project like few charts and graphs needs some extra configurations sometime.

Answer 2

I was having the same issue with edge. My website was not loading in edge after adding all the necessary polyfills.

I found that [hidden] attribute has some issue while rendering content on the web page in edge(as it worked perfectly fine in Google Chrome, Mozilla, IE) and after removing that attribute website loaded absolutely fine in Edge.

So instead of using [hidden] I use *ngIf to show and hide contents.

And the possible reason I found for this not working in Microsoft edge is:-

The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. So, Browsers won’t render elements with the hidden attribute set.

Browsers attach "display: none" styles to elements with hidden attribute. And when component gets load the style "display: none" is not updated automatically.

And *ngIf doesn’t show/hide element based on display property like hidden. It works by adding and removing elements from the DOM.