Do I need any specific instruction to make Angular2 with Bootstrap work in IE11 and Safari?

Question

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

https://angular.io/docs/ts/latest/guide/browser-support.html — Günter Zöchbauer, Apr 26 '17 at 13:51
@GünterZöchbauer Yeah, I saw that, and according to it, it should work. Which led me to believe I had to be missing something — LOTUSMS, Apr 26 '17 at 13:53

score 1 · Answer 1 · answered Apr 26 '17 at 13:53

1

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

IE9 ES6 classList

answered Apr 26 '17 at 13:53

Günter Zöchbauer

623,577
216
2,003
1,567

The ES6 polyfill is included and imported in @angular/cli out of the box. Any attempt to add it to the cli.json scripts results in an error for multiple script loading – LOTUSMS Apr 26 '17 at 14:02
Sorry, I don't know about angular-cli. – Günter Zöchbauer Apr 26 '17 at 14:11

score 0 · Accepted Answer · answered Apr 27 '17 at 16:36

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';

Do I need any specific instruction to make Angular2 with Bootstrap work in IE11 and Safari?

2 Answers2