Angular 2/4/5 no funciona en IE11

124

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

Siguiendo la sugerencia de alguien, probé este plunker, publicado por alguien en el desbordamiento de pila, tanto en Chrome como en IE 11. Funciona bien en Chrome, pero falla en IE 11. El mismo error, pegado al decir "Cargando ..."

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

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Router Sample</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
      System.import('src/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

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

¡Gracias!

angular typescript internet-explorer Pat Bone Crusher Laplante
fuente

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

Pat Bone Crusher Laplante

187

La última versión de angular solo está configurada para navegadores de hoja perenne 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 e iOS 10 y Chrome en el móvil.
Esto también incluye 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 correctos para que Angular funcione en IE11 y versiones posteriores.

Para lograr esto, vaya a polyfills.ts(en la srccarpeta por defecto) y simplemente elimine el comentario de 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 rebajar la targetpropiedad para es5en tsconfig.jsonlo @MikeDubsugerido. Lo que esto hace es cambiar el resultado de la compilación de las es6definiciones a es5definiciones. Por ejemplo, las funciones de flecha gruesa ( ()=>{}) se compilarán en funciones anónimas ( function(){}). Puede encontrar una lista de navegadores compatibles con es6 aquí .

Notas

• En los comentarios me preguntaron @jackOfAllsi los polyfills IE11 están cargados incluso si el usuario está en un navegador de hoja perenne que no los necesita. La respuesta es sí, lo son. La inclusión de los polyfills de IE11 llevará su archivo de polyfill ~162KBa ~258KBpartir del 8 de agosto de 2017. He invertido en tratar de resolver esto, sin embargo, no parece posible en este momento.

• Si se producen errores en IE10 y por debajo, entra en usted package.jsony la rebaja webpack-dev-serverde 2.7.1manera específica. Las versiones superiores a esta ya no admiten versiones "anteriores" de IE.

Zze
fuente

3

Mi proyecto angular 5 también tiene el mismo error, incluso si he descomentado el polyfill para IE, todavía no puede funcionar en el navegador IE. Demasiado extraño ...

Abby

Descomente todas las importaciones mencionadas, así como la importación de NgClass debajo de eso. Finalmente instale "npm install --save classlist.js". Esto funcionó en mi caso.

Vaibhav

2

@dudewad Estaba experimentando con la creación de 2 paquetes separados, uno explícitamente para IE11, y luego envolviendo ese paquete en un comentario condicional de IE que habría evitado que se hiciera realidad en Chrome.

Zze

1

@Zze bueno, eso es muy completo de tu parte. Bien, me gusta eso.

dudewad

1

Los comentarios condicionales de @Zze se eliminaron en IE10, solo se admiten en IE5-9. Por lo tanto, su paquete de IE no se cargaría para IE10 +, a menos que haya hecho un rastreo específico de un agente de usuario para agregar su paquete a la página en tiempo de ejecución.

bmcminn

22

Tuve exactamente el mismo problema y ninguna de las soluciones funcionó para mí. En su lugar, agregue la siguiente línea en (homepage) .html debajo de <head>arreglado.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Alex W.
fuente

Teniendo en cuenta la información de este SO stackoverflow.com/questions/26346917/… , la recomendación de usar X-UA-Compatible parece no ser válida.

Lubiluk

19

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

Agregue el siguiente script a su html:

<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

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

Ashley Grenon
fuente

2

esta solución no funcionó para mí :( ... [en el proyecto VS2015 que se ejecuta en IE]

Ceylan Mumun Kocabaş

12

A partir de febrero de 2017

Usando un proyecto Angular-Cli , todas las líneas en el polyfills.tsarchivo ya no estaban comentadas, por lo que todos los polyfills ya estaban siendo utilizados.

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

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

Solución : debe apuntar a es5 para que se ejecute en cualquier versión de IE, el soporte para esto solo fue introducido en el nuevo Edge Browser por Microsoft.

Esto se encuentra en src/tsconfig.json:

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

MikeDub
fuente

Esta respuesta es muy engañosa. Los polyfills son los scripts que hacen que IE 9 y superior sean compatibles con los estándares ES6 como se ve aquí: angular.io/docs/ts/latest/guide/browser-support.html Por lo tanto, no importa si el navegador admite de forma nativa funciones de flecha, los polyfills mitigan este problema por completo.

Zze

8

¿Cómo es lo que experimenté en mi caso ... engañoso? Los polyfills ya no estaban comentados y no solucionaron el problema que estaba experimentando en IE11. Apenas creo que esto sea digno de un voto negativo.

MikeDub

Después de volver a leer esto, entiendo lo que está tratando de decir, pero la forma en que está redactado actualmente, parece que tiene que cambiar manualmente todos sus .tsarchivos para que no utilicen la flecha gruesa a funciones anónimas. Creo que debería recortar una cita de ese enlace sobre cómo la salida del compilador es diferente si cambia el destino del script ecma que mitiga el problema en adelante.

Zze

55

Además, ya estoy apuntando a es5 en mi tsconfig y todavía tengo problemas.

gh0st

1

@ MikeDub Intenté usar su solución pero no funciona para IE11. ¿Me puede proporcionar un mejor enfoque?

Prasanna Sasne

11

Deberá ajustar el archivo polyfills.ts para sus navegadores de destino descomentando las secciones apropiadas.

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

Jigar Bhatt
fuente

1

Esto es genial. Gracias.

AtLeastTheresToast

10

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

en index.html agregar:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

en src \ polyfills.ts descomenta:

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

Belen Martin
fuente

1

Sí, esto funciona para IE11 pero no para IE10:

ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'setPrototypeOf' at EmptyError (http://localhost:4200/vendor.js:102653:9)

Junior Mayhé

10

Descomente algunas importaciones en el archivo polyfill.ts.

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

Expandir fragmento

Instalar npm Pacakages Observe que hay algunos comandos de instalación de npm en los comentarios. Si está utilizando una versión anterior de Angular CLI, también puede haber una tercera. Para las versiones de CLI angular 7, 6 y 1.7, debe ejecutar:

npm install --save classlist.js

npm install --save web-animations-js

ahora abra IE y renderice su aplicación y verifique :)

Ali
fuente

8

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

Edite polyfills.tsy descomente las importaciones que son necesarias para IE11.

Más precisión, edite polyfills.ts(ubicado en la srccarpeta 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 ejecutar en IE11).

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

Como explicación, los polyfills son fragmentos de código que implementan una función en un navegador web que no lo admite. Es por eso que 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 navegadores que se actualizan automáticamente ).

Ekeko
fuente

8

EDITAR 15/05/2018 : Esto se puede lograr con una metaetiqueta ; agregue esa etiqueta a su index.html y no tenga en cuenta esta publicación.

Esta no es una respuesta completa a la pregunta (para la respuesta técnica, consulte la respuesta de @ Zze arriba ), 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+ usando los polyfills en IE11. Si está ejecutando el sitio desde un host de intranet (es decir, si lo está probando 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 Vista de compatibilidad", dado que la Vista de compatibilidad de IE11 rompe un par de convenciones incluidas en los polyfills de ES5 para Angular.

Shotgun Ninja
fuente

1

Si sigue esta solución, debe hacerlo en todos los clientes que ejecutan su aplicación. Agregar una etiqueta especial a su archivo html obliga al navegador a ejecutarse en la última versión disponible en lugar del modo de compatibilidad. Consulte la siguiente respuesta para encontrar la etiqueta: stackoverflow.com/a/47777695/4628364

Poly

2

En mi experiencia, si su aplicación se sirve en un host de intranet, el uso de esta metaetiqueta no anula la configuración predeterminada de IE 11 para 'Mostrar sitios de intranet en Vista de compatibilidad'. Los usuarios de la aplicación de intranet aún deberán ingresar y desmarcar manualmente esta opción, que es menos que ideal. Actualmente estoy buscando una solución, quizás compilando a ES5 en lugar de ES6.

Kyle Vassella

6

Tengo una aplicación Angular4, incluso para mí también no funcionaba en el navegador IE11, he realizado los siguientes cambios, ahora funciona correctamente. Simplemente agregue el código a continuación en el archivo index.html

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Solo necesita descomentar estas líneas debajo del archivo polyfills.ts

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

Estos 2 pasos anteriores resolverán su problema, por favor avíseme si habrá algo allí. ¡¡¡Gracias!!!

Sanjay Tiwari
fuente

Ya tengo dos partes sin comentar, pero todavía no funciona, ¿tiene otra solución

Menna Ramadan

5

Si todavía tiene problemas de que no todas las funciones de JavaScript funcionan, agregue esta línea en sus polyfills. Soluciona el método faltante de 'valores':

import 'core-js/es7/object';

Y esta línea corrige el método 'incluye' que falta:

import 'core-js/es7/array'

cristiano
fuente

4

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Ivan Lopez
fuente

3

cambiando tsconfig.json

"target":"es5",

resuelto mi problema

usuario3050538
fuente

2

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

<script src="https://npmcdn.com/[email protected] 
 beta.17/es6/dev/src/testing/shims_for_IE.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>

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

import 'core-js/client/shim';

gaurav gupta
fuente

2

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`.

Kuldip D Gandhi
fuente

2

Si ninguna de las otras soluciones funciona para usted, vale la pena investigar la fuente del problema. Puede ser que un módulo npm inserte directamente el código ES6, que no se puede transpilar.

En mi caso tuve el

SCRIPT1002: error de sintaxis vendor.js (114536,27) en la siguiente línea:

const ucs2encode = array => String.fromCodePoint(...array);

Busqué en la carpeta node_modules y encontré de qué archivo provenía la línea. Resultó que el culpable era punycode.js que en su versión 2.1.0 usa ES6 directamente.

Después de que lo bajé a 1.4.1, que usa ES5, el problema se resolvió.

typhon04
fuente

1

Muchas gracias por su respuesta. Si bien no resolvió el problema, me ayudó a encontrar el módulo de problemas e informar a su autor sobre el problema.

lucifer63

2

Cómo resolver este problema en Angular8

polyfills.ts descomenta import 'classlist.js'; y import 'web-animations-js';luego instala dos dependencias usando npm install --save classlist.jsy npm install --save web-animations-js.

actualizar tsconfig.jsoncon"target":"es5",

luego ng serveejecute la aplicación y ábrala en IE, funcionará

Rijo
fuente

1

Descomente la sección IE en src / polyfill.js,

/ ** IE10 e IE11 requieren lo siguiente para el soporte de NgClass en elementos SVG * /

importar 'classlist.js';
Si hay algún error de compilación para el paquete que falta, entonces,

npm install classlist.js --save-exacto
Asegúrese de incluir la siguiente línea para establecer el modo de documento IE predeterminado. De lo contrario, se abrirá en la versión 7

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Muhammed de repente
fuente

0

Probé todas las soluciones en este hilo, así como muchas otras, sin éxito. Lo que terminó solucionando esto fue actualizar todos los paquetes de mi proyecto, incluidos los cambios de versión PRINCIPALES. Entonces:

Ejecutar npm desactualizado
Actualice package.json con el número que se muestra en la columna actual de los resultados (esto puede romper su proyecto, tenga cuidado)
Ejecute npm install
Me aseguré de que también tuviera los polyfills sin comentar como se señaló en las otras respuestas.

Eso es. Desearía poder determinar qué biblioteca fue la culpable. El error real que estaba recibiendo era "Error de sintaxis" en vendor.js en Angular 6.

Jordán
fuente

0

Angular 9 listo para usar debería funcionar absolutamente bien en IE11 ahora.

Intenté todas las sugerencias enumeradas aquí y ninguna funcionó. Sin embargo, logré rastrearlo hasta una biblioteca específica que estaba importando app.module( ZXingScannerModulepara ser precisos). Si su aplicación falla en IE11 en la primera página, intente eliminar las bibliotecas de una en una y verifique en IE11; se perdió por completo en todos mis errores de advertencia de compilación. Si encuentra que este es el caso, considere la posibilidad de compartimentar el área de su sitio que utiliza esta biblioteca como un módulo de carga lenta.

Andrew Junior Howard
fuente

Angular 2/4/5 no funciona en IE11

Respuestas:

Notas