0
239
ViewsDo I need any specific instruction to make Angular2 with Bootstrap work in IE11 and Safari?
A member of our project team suggested recently that we moved from Angular1/Angular-Material to Angular2/AngularMaterial2 because of Safari incompatibility. I thought this incompatibility was a Material Design flexbox issue rather than an Angular issue but I didn't want to counter without researching first. So I built an Angular2/Bootstrap and an Angular2/AngularMaterial2 apps hoping to prove Material Design is the issue and moving to Angular2 is an overhaul not worth taking over.
But I realized shortly that my Angular2/Bootstrap app is not compiling in IE11/Safari! Imagine my surprise!
Do I need any type of specific instruction in Angular2 to fix this compatibility? I find it very hard to believe that such a powerful framework is ignoring these browsers.
Notice the browser's stack in my image. Also no errors on the console.
I added ES5 and ES6 shims as requested in many places i.e. here (Angular 2 with IE 11 not working) But no cigar.
Any ideas? Thank you in advance
2 answers
Answer question0
https://angular.io/docs/ts/latest/guide/browser-support.html
Mandatory polyfills These are the polyfills required to run an Angular application on each supported browser:
Browsers (desktop & mobile) Polyfills required Chrome, Firefox, Edge, Safari 9+ None Safari 7 & 8, IE10 & 11, Android 4.1+ ES6
0
And I've figure out the problem.
Apparently, Angular CLI deliberately commented the polyfills required to compile in IE and Safari. Why? Your guess is as good as mine. But surprisingly enough, they do this.
Go to src/polyfills.ts and un-comment lines (22-34). These will give you the very basic compilation, however, more is commented out and will require extra npm packages installations should you want to use SVGs, angular animation, and certain pipes.
/** 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/set';