Internet Explorer 11 and Angular 2+

IE 11 and Angular don’t always mix. I must say that there’s quite the support provided by the Angular dev team and community. But, there are things that really aren’t up for the Angular devs to fix.

I’ve created a small list of issues I’ve encountered when developing and Angular 5 application for an IE 11 client.

First, if you ever get asked to support IE, talk your customer/manager/client out of it. Show them this blogpost, show them the references, show them this IE bug that is still open after 4 years. Heavily advise against it. Note that the following pieces of modern tech are not supported in IE11:

Also, IE11 was released in 2013.

If you did not prevail on the first task, my condolences, here are some common issues for you to keep in mind when supporting IE in Angular development.

F12 Developer Tools

When using the IE11 developer tools, Angular throws the ‘Can’t execute code from a freed script’ error.

The most efficient way to fix this, is by enabling cross context check on Zone.js. Put these lines in your polyfills.ts file:

/*
* 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;
if (document['documentMode'] || /Edge/.test(navigator.userAgent)) {
(window as any).__Zone_enable_cross_context_check = true;
}

ngForm valueChanges is triggered on page load

If you’re using an Angular Reactive Form input with a placeholder, you might encounter that the fields are initially dirty upon page load. This is due to a bug in IE and will not be fixed anytime soon.

A̵ ̵w̵o̵r̵k̵a̵r̵o̵u̵n̵d̵ ̵w̵o̵u̵l̵d̵ ̵b̵e̵ ̵t̵o̵ ̵’̵e̵n̵a̵b̵l̵e̵’̵ ̵y̵o̵u̵r̵ ̵f̵o̵r̵m̵ ̵a̵f̵t̵e̵r̵ ̵t̵h̵e̵ ̵c̵o̵m̵p̵o̵n̵e̵n̵t̵ ̵h̵a̵s̵ ̵f̵i̵n̵i̵s̵h̵e̵d̵ ̵v̵i̵a̵ ̵t̵h̵e̵ ̵O̵n̵I̵n̵i̵t̵ ̵a̵n̵d̵ ̵A̵f̵t̵e̵r̵V̵i̵e̵w̵C̵h̵e̵c̵k̵e̵d̵ ̵l̵i̵f̵e̵c̵y̵c̵l̵e̵ ̵h̵o̵o̵k̵s̵,̵ ̵b̵a̵s̵i̵c̵a̵l̵l̵y̵ ̵y̵o̵u̵ ̵s̵e̵t̵ ̵a̵ ̵f̵l̵a̵g̵ ̵t̵o̵ ̵f̵a̵l̵s̵e̵ ̵a̵n̵d̵ ̵f̵l̵i̵p̵ ̵t̵h̵e̵ ̵b̵i̵t̵ ̵a̵f̵t̵e̵r̵ ̵t̵h̵e̵ ̵v̵i̵e̵w̵ ̵w̵a̵s̵ ̵c̵h̵e̵c̵k̵e̵d̵.̵ ̵

T̵h̵i̵s̵ ̵d̵o̵e̵s̵ ̵n̵o̵t̵ ̵c̵o̵m̵p̵l̵e̵t̵e̵l̵y̵ ̵e̵l̵i̵m̵i̵n̵a̵t̵e̵ ̵t̵h̵e̵ ̵i̵s̵s̵u̵e̵,̵ ̵b̵u̵t̵ ̵i̵t̵ ̵s̵h̵o̵u̵l̵d̵ ̵p̵r̵o̵v̵i̵d̵e̵ ̵y̵o̵u̵ ̵w̵i̵t̵h̵ ̵a̵ ̵d̵i̵r̵e̵c̵t̵i̵o̵n̵ ̵o̵n̵ ̵h̵o̵w̵ ̵t̵o̵ ̵s̵o̵l̵v̵e̵ ̵i̵t̵.̵

The solution to this problem is to delay the registration of the ‘change’ and ‘input’ events on the <input> field until after view initialization (AfterViewInit) together with a setTimeout.

Flex content is badly aligned

IE11 goes bananas if the flex-basis is set to auto, set it to 100% in order to get the correct flex behaviour.

flex-basis: 100%;

Object doesn’t support property or method ‘includes’ && Object doesn’t support property or method ‘values’

In order to support IE11 (or other older browsers) some JavaScript features need to be polyfilled.

To fix the missing ‘includes’ method, you need to put this line in your polyfill.ts file:

import 'core-js/es7/array';

To fix the missing ‘values’ method, you need to put this line in your polyfill.ts file:

import 'core-js/es7/object';

This is an example of our polyfill.ts file, all we require is enable to support IE11:

/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
*   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
*   2. Application imports. Files imported after ZoneJS that should be loaded before your main
*      file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* 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';
/** 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';
import 'core-js/es7/array';
import 'core-js/es7/object';
/** 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';
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone';  // Included with Angular CLI.

Object doesn’t support this action

The error ‘Object doesn’t support this action’ in IE11 is a tricky one to pinpoint. For our codebase, the constructor for File was the culprit. To resolve this, we had to convert from Blob to File without calling the constructor.

private blobToFile = (theBlob: Blob, name: string, fileName: string): File => {
     const blob: any = theBlob;
     blob.lastModifiedDate = new Date();
     blob.name = name;
     blob.fileName = fileName;
     return <File>theBlob;
}

That’s all for now, we’re still in development to support IE11, so expect this list to grow over time.

In the meantime I want to clarify that I don’t want to bash on Microsoft. I love working with Microsoft technologies, but I honestly believe IE should be dead and buried. The torch needs to be passed on to Edge, which I find to be a worthy browser in this vast and everchanging web landscape.

Like what you read? Give Maarten Merken a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.