Why is ngx-chart TreeMap labels are not shown in IE11?

Question

I am currently using ngx-charts version 10.0.1 for ploting Treemap chart. My Angular version is 7.2.1. It is working as expected in Chrome but the labels are not shown in IE11. On page load, i'm seeing below errors in the IE console:

TypeError: Object doesn't support property or method 'forEach' (Note: I am writing forEach loop to process data from backend, I also tried converting it into normal for loop, but it didn't solve the problem.)

TypeError: Unable to set property 'pointer-events' of undefined or null reference.

Also the animations on hover and on click actions are very slow compared to Chrome. And I can see the label and value on tooltip.

Things I have tried till now :-

1) I saw few of the forums and installed classlist.js and included following links in Index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/classlist.js/classList.min.js"></script>

<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

2) I also added the animations.js and installed it. 3) Tried reverting the ngx-charts to the version 8.1.0.

But none of the above techniques seem to solve the problem.

Below is the code I have in my Polyfills.ts file:

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/client/shim';
import "isomorphic-fetch";
import 'core-js/es6';
import 'core-js/es7/array';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');


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

if (!Element.prototype.matches) {
    Element.prototype.matches =                     
(<any>Element.prototype).msMatchesSelector ||
    Element.prototype.webkitMatchesSelector;
}

import 'classlist.js';  

import 'web-animations-js'; 

import 'zone.js/dist/zone'; 

(window as any).global = window;
if (!Object.entries) {
    Object.entries = function (obj) {
        var ownProps = Object.keys(obj),
            i = ownProps.length,
            resArray = new Array(i); // preallocate the Array
        while (i--)
            resArray[i] = [ownProps[i], obj[ownProps[i]]];

        return resArray;
    };
}

Answer 1

If the pointer events error is caused when hovering the chart, adding this, either as script in the index.html or only the IIFE in the polyfills.ts, should help:

    <script>
        (function (window) {
            try {
                new MouseEvent('test');
                return false; // No need to polyfill
            } catch (e) {
                // Need to polyfill - fall through
            }

            // Polyfills DOM4 MouseEvent

            var MouseEvent = function (eventType, params) {
                params = params || { bubbles: false, cancelable: false };
                var mouseEvent = document.createEvent('MouseEvent');
                mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

                return mouseEvent;
            }

            MouseEvent.prototype = Event.prototype;

            window.MouseEvent = MouseEvent;
        })(window);
    </script>

I also noticed the problem with the for each loop in a library. This shouldn't be a problem since according to MDN IE11 supports the forEach loop, but having this said, it helped to add a polyfill:

// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function(callback, thisArg) {

    var T, k;

    if (this === null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== "function") {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length > 1) {
      T = thisArg;
    }

    // 6. Let k be 0
    k = 0;

    // 7. Repeat, while k < len
    while (k < len) {

      var kValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
        kValue = O[k];

        // ii. Call the Call internal method of callback with T as the this value and
        // argument list containing kValue, k, and O.
        callback.call(T, kValue, k, O);
      }
      // d. Increase k by 1.
      k++;
    }
    // 8. return undefined
  };
}

Edit

If this doesn't help, it might be a good idea to remove all your imports, because your problems might be related to importing unnecessary stuff (d3, ...) or importing things twice (e.g. shim.min.js in index.html and in polyfills.ts again various core-js packages)

To get ngx-charts working all you need to add in polyfill.ts is listed here.