Un miembro de nuestro equipo de proyecto sugirió recientemente que nos moviéramos de Angular1/Angular-Material a Angular2/AngularMaterial2 debido a la incompatibilidad con Safari. Pensé que esta incompatibilidad era un problema de Flexbox de Material Design en lugar de un problema de Angular, pero no quería contrarrestarlo sin investigar primero. Así que creé una aplicación Angular2/Bootstrap y una Angular2/AngularMaterial2 con la esperanza de demostrar que Material Design es el problema y pasar a Angular2 es una revisión que no vale la pena asumir.
¡Pero pronto me di cuenta de que mi aplicación Angular2/Bootstrap no se compila en IE11/Safari! ¡Imagina mi sorpresa!
¿Necesito algún tipo de instrucción específica en Angular2 para arreglar esta compatibilidad? Me resulta muy difícil creer que un marco tan poderoso esté ignorando estos navegadores.
Observe la pila del navegador en mi imagen. Tampoco hay errores en la consola.
Agregué cuñas ES5 y ES6 según lo solicitado en muchos lugares, es decir, aquí ( Angular 2 con IE 11 no funciona ) Pero no cigarro.
¿Algunas ideas? Gracias de antemano
https://angular.io/docs/ts/latest/guide/browser-support.html
Polyfills obligatorios Estos son los polyfills necesarios para ejecutar una aplicación Angular en cada navegador compatible:
Navegadores (de escritorio y móviles) Polyfills requeridos Chrome, Firefox, Edge, Safari 9+ Ninguno Safari 7 y 8, IE10 y 11, Android 4.1+ ES6
Lista de clases IE9 ES6
Y he resuelto el problema.
Aparentemente, Angular CLI comentó deliberadamente los polyfills necesarios para compilar en IE y Safari. ¿Por qué? Tu invitado es tan bueno como el mío. Pero, sorprendentemente, lo hacen.
Vaya a src/polyfills.ts y elimine los comentarios de las líneas (22-34). Estos le darán la compilación muy básica, sin embargo, se comenta más y requerirá instalaciones de paquetes npm adicionales si desea usar SVG, animación angular y ciertas tuberías.
/** 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';