Angular 2/4/5 no funciona en IE11

Estoy tratando de descubrir por qué mi aplicación angular 2 está bloqueada al mostrar Cargando … cuando se ejecuta en IE 11.

Siguiendo la sugerencia de alguien, probé este plunker, publicado por alguien en desbordamiento de stack, tanto en Chrome como en IE 11. Funciona bien en Chrome, pero falla en IE 11. El mismo error, se pega al decir “Cargando …”

El plunker es: https://plnkr.co/edit/6zVFbrH5yohwc714gBbk?p=preview

   document.write(''); Router Sample          System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, packages: {'src': {defaultExtension: 'ts'}} }); System.import('src/boot') .then(null, console.error.bind(console));    loading...   

¿Alguien tiene alguna idea de por qué IE 11 no puede ejecutar la aplicación angular 2?

¡Gracias!

La última versión de angular solo está configurada para navegadores perennes de forma predeterminada …

La configuración actual es para los llamados navegadores “perennes”; las últimas versiones de navegadores que se actualizan automáticamente. Esto incluye Safari> = 10, Chrome> = 55 (incluido Opera), Edge> = 13 en el escritorio, iOS 10 y Chrome en dispositivos móviles.
Esto también incluye a Firefox, aunque no se menciona.

Consulte aquí para obtener más información sobre el soporte del navegador junto con una lista de polyfills sugeridos para navegadores específicos. https://angular.io/guide/browser-support#polyfill-libs


Esto significa que debe habilitar manualmente los polyfills para que Angular funcione en IE11 y en versiones posteriores.


Para lograr esto, vaya a polyfills.ts (en la carpeta src por defecto) y simplemente descomente las siguientes importaciones:

 /*************************************************************************************************** * BROWSER POLYFILLS */ /** 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'; 

Tenga en cuenta que el comentario está literalmente en el archivo, por lo que es fácil de encontrar.

Si todavía tiene problemas, puede degradar la propiedad de target a es5 en tsconfig.json como se sugirió @MikeDub . Lo que hace esto es cambiar la salida de comstackción de cualquier definición de es5 a definiciones de es5 . Por ejemplo, las funciones de flecha fat ( ()=>{} ) se comstackrán en funciones anónimas ( function(){} ). Aquí puede encontrar una lista de navegadores compatibles con es6.


Notas

• Se me preguntó en los comentarios por @jackOfAll si los @jackOfAll IE11 están cargados incluso si el usuario está en un navegador perenne que no los necesita. La respuesta es, sí lo son! La inclusión de los polyfills IE11 tomará su archivo polyfill de ~162KB a ~258KB partir del 8 de agosto de 17. He invertido en tratar de resolver esto, pero no parece posible en este momento.

• Si obtiene errores en IE10 y en versiones posteriores, ingrese a package.json y webpack-dev-server a 2.7.1 específicamente. Las versiones superiores a esto ya no son compatibles con las versiones de IE “anteriores”.

Me encontré con este problema hoy. Encontré una solución en GitHub que no requiere ir a una versión posterior de la versión beta.

Agregue la siguiente secuencia de comandos a su html:

  

Esto resolvió el problema para mí. Para más detalles, puede seguir el problema de Github aquí: https://github.com/angular/angular/issues/7144

Tenía exactamente el mismo problema y ninguna de las soluciones funcionó para mí. En su lugar, al agregar la siguiente línea en (página de inicio) .html en corrigió.

  

Tendrá que ajustar el archivo polyfills.ts para sus navegadores de destino al quitar el comentario de las secciones correspondientes.

 /** 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/weak-map'; import 'core-js/es6/set'; 

A partir de septiembre de 2017 (versión del nodo = v6.11.3, versión npm = 3.10.10), esto es lo que funcionó para mí (gracias @Zze):

Edite polyfills.ts y elimine las importaciones necesarias para IE11.

Más preciselly, edite polyfills.ts (ubicado en la carpeta src por defecto) y simplemente elimine el comentario de todas las líneas requeridas para IE11 (los comentarios dentro del archivo explican exactamente qué importaciones son necesarias para ejecutarse en IE11).

Una pequeña advertencia: preste atención al descomentar las líneas para classlist.js y web-animations-js . Estas líneas comentadas tienen un comentario específico cada una: debe ejecutar los comandos npm asociados antes de descomentarlos o procesar polyfills.ts se romperá.

Como explicación, los polyfills son piezas de código que implementan una función en un navegador web que no lo admite. Por eso, en la configuración predeterminada de polyfills.ts, solo está activo un conjunto mínimo de importaciones (porque apunta a los llamados navegadores “perennes”, las últimas versiones de los navegadores que se actualizan automáticamente ).

EDITAR 2018/05/15 : Esto se puede lograr con una metaetiqueta ; agrega esa etiqueta a index.html y descarta esta publicación.

Esta no es una respuesta completa a la pregunta (para la respuesta técnica, consulte la respuesta de @Zze anterior ), pero hay un paso importante que debe agregarse:

MODO DE COMPATIBILIDAD

Incluso con los polyfills apropiados en su lugar, todavía hay problemas con la ejecución de aplicaciones Angular 2+ que utilizan los polyfills en IE11. Si ejecuta el sitio desde un host de intranet (es decir, si lo prueba en http: // localhost u otro nombre de dominio local asignado), debe ir a la configuración de Vista de compatibilidad y desmarcar “Mostrar sitios de intranet en la Vista de compatibilidad”, ya que la Vista de compatibilidad de IE11 rompe algunas de las convenciones incluidas en los polyfills de ES5 para Angular.

enter image description here

Para mí con iexplorer 11 y Angular 2, solucioné todos los problemas anteriores haciendo 2 cosas:

en index.html agregar:

  

en src \ polyfills.ts uncomment:

 /** 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/weak-map'; import 'core-js/es6/set'; 

A partir de febrero de 2017

Utilizando un proyecto Angular-Cli , todas las líneas del archivo polyfills.ts ya estaban descomentadas, por lo que ya se estaban utilizando todos los polyfills.

Encontré esta solución aquí para solucionar mi problema.

Para resumir el enlace anterior, IE no admite las funciones de flecha lambda / flecha adiposa que son una característica de es6 . ( Esto es si polyfills.ts no funciona para usted ).

Solución : debe dirigirse a es5 para que se ejecute en cualquier versión de IE, el soporte para esto solo se introdujo en el nuevo navegador Edge de Microsoft.

Esto se encuentra en src/tsconfig.json :

 "outDir": "../dist/out-tsc", "sourceMap": true, "target": "es5", 

Estaba teniendo el mismo problema, si ha habilitado Mostrar sitios de intranet en la Vista de compatibilidad, polyfills.ts no funcionará, aún necesita agregar la siguiente línea como se le ha dicho.

  

Lo que funcionó para mí es que seguí los siguientes pasos para mejorar el rendimiento de mi aplicación en IE 11 1.) En el archivo Index.html, agregue los siguientes CDN’s

   

2.) En el archivo polyfills.ts y agregue la siguiente importación:

 import 'core-js/client/shim'; 

En polyfills.ts

 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/es7/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/weak-set'; import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ import 'classlist.js'; // Run `npm install --save classlist.js`. /** Evergreen browsers require these. **/ import 'core-js/es6/reflect'; import 'core-js/es7/reflect'; /** * Required to support Web Animations `@angular/animation`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ import 'web-animations-js'; // Run `npm install --save web-animations-js`. 

La respuesta es usar 2.0.0-beta.0 por ahora.