Estoy tratando de averiguar por qué mi aplicación angular 2 no muestra 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, atascado 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!
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 "evergreen"; 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 dispositivos móviles.
Esto también incluye Firefox, aunque no se menciona.
Consulte aquí para obtener más información sobre la compatibilidad del navegador junto con una lista de polyfills sugeridos para navegadores específicos. https://angular.io/guide/browser-support#polyfill-libs
Para lograr esto, vaya a polyfills.ts (en la carpeta src de manera predeterminada) y simplemente elimine los comentarios 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 es6 a definiciones 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 aquí .
• @jackOfAll me preguntó en los comentarios si los polyfills de IE11 se cargan 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 de IE11 hará que su archivo de polyfill pase de ~162 ~162KB a ~258KB a 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 anteriores, acceda a su package.json y baje webpack-dev-server a 2.7.1 específicamente. Las versiones superiores a esta ya no son compatibles con las versiones "antiguas" de IE.
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> , se solucionó.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />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 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