navigationend - title angular 6

Angular 2/4/5 no funciona en IE11 (17)

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

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!

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

Descomente algunas importaciones en el archivo polyfill.ts.

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 :)

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

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

Más precisamente, 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 ejecutar en IE11).

Una pequeña advertencia: preste atención cuando descomente 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 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. Esta es la razón por la cual 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 ).

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.

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

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 carpeta src 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 aún tiene problemas, puede degradar la propiedad de target a es5 en tsconfig.json como sugirió @MikeDub . Lo que esto hace es cambiar la salida de compilación de cualquier definición de es5 a definiciones de es5 . Por ejemplo, las funciones de flecha gruesa ( ()=>{} ) se compilarán en funciones anónimas ( function(){} ). Puede encontrar una lista de navegadores compatibles con es6 here .

Notas

• @jackOfAll me preguntó en los comentarios si 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 de ~162KB a ~258KB partir del 8 de agosto de 2017. He invertido en tratar de resolver esto, sin embargo, no parece posible en este momento.

• Si obtiene errores en IE10 y versiones inferiores, acceda a su package.json y webpack-dev-server a 2.7.1 específicamente. Las versiones superiores a esta ya no admiten versiones IE "anteriores".

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

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

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:

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.

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:

import ''core-js/es7/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ó.

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

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

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

import ''core-js/es7/object'';

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 siguiente código 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

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

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

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

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

cambiando tsconfig.json

"target":"es5",

resuelto mi problema

A partir de febrero de 2017

Al usar un proyecto Angular-Cli , todas las líneas en el archivo polyfills.ts ya no estaban comentadas, por lo que todos los polyfills ya se estaban utilizando.

Encontré esta solución here 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",

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.