2

I have an Angular 5 app that works perfect in Chrome, Opera, Firefox and Edge. But in IE11 the app doesn't render. I include the polyfills.ts file and install the npm packages classlist.js and web-animations-js.

/** 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';

/** 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 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';


/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 */

 // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

 /*
 * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 * with the following flag, it will bypass `zone.js` patch for IE/Edge
 */
// (window as any).__Zone_enable_cross_context_check = true;

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



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

In the IE11 console I got the following errors:

enter image description here

How can I get my app working in IE11?

Following the @Pako answer the app now renders in IE11 but raises an error when I try to make the login request

The object does not accept the property or the 'values' method

This error is caused by Object.values() since it's not supported in IE11.

Kamil Naja
  • 6,267
  • 6
  • 33
  • 47
Juan
  • 2,024
  • 3
  • 17
  • 36
  • The edit seems unrelated to the original question, perhaps raise a new question regarding the form error? In the meantime, change it to login(f) and in your login method console.log(f) to see what is being passed exactly. – rrd Jun 14 '18 at 09:40
  • I think the edit is related to the question because is about the app not working as expected in IE11. In other browsers everything works fine. – Juan Jun 14 '18 at 09:42
  • to resolve Object.values() error can try su see other answer like this https://stackoverflow.com/questions/42830257/alternative-version-for-object-values – Pasquale De Lucia Jun 14 '18 at 10:03

1 Answers1

1

Can try to add this code in the head of index.html

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

i think it work

Pasquale De Lucia
  • 190
  • 1
  • 1
  • 12
  • The app now renders. But when I try to send the credentials using the login form I got the next error "The object does not accept the property or the 'values' method". – Juan Jun 14 '18 at 09:06
  • can you post the code where send credentials? Is possible that ie11 not support ES6 and the solution usually is is to add polyfills but you say to just added this – Pasquale De Lucia Jun 14 '18 at 09:23