Library does not function properly on IE11

jclancy93 commented 7 years ago

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.

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 commented 7 years ago

Are you including the proper polyfills?

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

https://github.com/angular/angular-cli/issues/4128

marjan-georgiev commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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

Luukschoen commented 7 years ago

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 commented 7 years ago

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

Belaroth commented 7 years ago

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 commented 7 years ago

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

jclancy93 commented 7 years ago

@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 commented 7 years ago

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

redplane commented 5 years ago

@Belaroth : Nice solution , thank you so much.

swimlane / ngx-charts

Library does not function properly on IE11 #459