Library does not function properly on IE11

[jclancy93]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
IE11 Throwing an animation error.

Here is the stack trace:
at _contains (http://192.168.1.92:4200/vendor.bundle.js:111033:41)
at NoopAnimationDriver.prototype.containsElement (http://192.168.1.92:4200/vendor.bundle.js:111078:77)
at TransitionAnimationEngine.prototype._balanceNamespaceList (http://192.168.1.92:4200/vendor.bundle.js:114345:17)
at TransitionAnimationEngine.prototype.createNamespace (http://192.168.1.92:4200/vendor.bundle.js:114318:13)
at TransitionAnimationEngine.prototype.register (http://192.168.1.92:4200/vendor.bundle.js:114369:13)
at AnimationEngine.prototype.register (http://192.168.1.92:4200/vendor.bundle.js:115419:9)
at AnimationRendererFactory.prototype.createRenderer (http://192.168.1.92:4200/vendor.bundle.js:181176:9)
at DebugRendererFactory2.prototype.createRenderer (http://192.168.1.92:4200/vendor.bundle.js:161361:9)
at createComponentView (http://192.168.1.92:4200/vendor.bundle.js:159965:9)
at callWithDebugContext (http://192.168.1.92:4200/vendor.b"

Expected behavior
IE11 to work

Reproduction of the problem
https://swimlane.github.io/ngx-charts/

The error is present on the demo page. You can see the errors in console on IE11.

"TypeError: Object doesn't support property or method 'contains'

What is the motivation / use case for changing the behavior?
Allowing IE11 to work

• ngx-charts version: 5.3.1, 5.2.1

• Angular version: 4.2.4

• Browser: [IE 11.0 ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[marjan-georgiev]

Are you including the proper polyfills?

https://angular.io/guide/browser-support

angular/angular-cli#4128

[marjan-georgiev]

Also, there were some changes to angular's animation framework in 4.2. This version of ngx-charts was built alongside angular 4.1.x. That could be the reason it is broken with 4.2. The next version will be updated to work with 4.2.

[alexandermikuta]

It would be nice if in the README would be added with which version of Angular(-animations) the library was build. Is already known when the Release with 4.2.-compatibility will be available?

[jclancy93]

@marjan-georgiev definitely included all the right polyfills, and I'm sure you guys did for the demo site too. I was able to silence the error by downgrading to Angular 4.1.x.

[alexandermikuta]

The latest version (6.0.0) still seems to have this error.

[Luukschoen]

I really love the lib you guys build, but I really hope there's going to be some changes made regarding the newer versions of the lib and backwards compatibility for IE. I really hate the browser, but since right now it won't generate charts because of errors which can't be fixed by implementing all necessary polyfills and I think IE11 is still widely in use I somehow would like to know where to search for the problem and perhaps help fix it. Anyone can point in the right direction as why the lib didn't generate these errors before but is doing now?

Downgrading to Angular 4.1.X and lib <6.0.0 seems to get it back working again, but then we can't profit from the benefits made in the last few versions of the lib.

EDIT: @Belaroth has a workaround to get it working with 6.0.0.

[jdjuan]

@Luukschoen Thank you!, it worked by doing the downgrade! 👍 🎖

[Belaroth]

It looks like Angular changed something with Animations that broke ngx-charts. I was able to get it working again by adding the polyfills:
import 'core-js/es7/array';
import 'classlist.js';

and the shim:
if (typeof SVGElement.prototype.contains == 'undefined') {
SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
}

It's not a fix but at least it gets it working in 6.0.0

[dagnelies]

IMHO it's really stupid that the required polyfills aren't included by default.

[jclancy93]

@dagnelies It's also not my favorite decision, but this has nothing to do with ngx-charts, bring it up with angular-cli or whatever seed project you use. Don't think its gonna happen with cli though, they purposefully exclude them in attempt to keep bundle sizes as small as possible.

[cgeetha]

@Belaroth : It worked for me too. Adding those lines to polyfills. Thank you.

[redplane]

@Belaroth : Nice solution , thank you so much.