Ejemplo de compatibilidad con el navegador angular

Angular es compatible con los navegadores más recientes. Esto incluye las siguientes versiones específicas:

El proceso de integración continua de Angular ejecuta pruebas unitarias del marco en todos estos navegadores para cada solicitud de extracción, utilizando Laboratorios de salsa y BrowserStack.

Polyfills

Angular se basa en los últimos estándares de la plataforma web. Dirigirse a una gama tan amplia de navegadores es un desafío porque no son compatibles con todas las funciones de los navegadores modernos. Usted compensa cargando scripts de polyfill (“polyfills”) para los navegadores que debe admitir. La siguiente tabla identifica la mayoría de los polyfills que puede necesitar.

Los polyfills sugeridos son los que ejecutan aplicaciones angulares completas. Es posible que necesite polyfills adicionales para admitir funciones que no se incluyen en esta lista. Tenga en cuenta que polyfills no puede transformar mágicamente un navegador antiguo y lento en uno moderno y rápido.

En Angular CLI versión 8 y superior, las aplicaciones se crean utilizando carga diferencial, una estrategia en la que la CLI crea dos paquetes separados como parte de su aplicación implementada.

• El primer paquete contiene la sintaxis moderna de ES2015, aprovecha el soporte integrado en los navegadores modernos, envía menos polyfills y da como resultado un tamaño de paquete más pequeño.

• El segundo paquete contiene código en la antigua sintaxis de ES5, junto con todos los polyfills necesarios. Esto da como resultado un tamaño de paquete más grande, pero es compatible con navegadores más antiguos.

Esta estrategia le permite continuar construyendo su aplicación web para que admita varios navegadores, pero solo cargue el código necesario que el navegador necesita. Para obtener más información sobre cómo funciona esto, consulte Carga diferencial en la guía de implementación.

Habilitación de polyfills con proyectos CLI

Angular CLI proporciona soporte para polyfills. Si no está utilizando la CLI para crear sus proyectos, consulte las instrucciones de Polyfill para usuarios que no utilizan la CLI.

Cuando crea un proyecto con el ng new comando, un src/polyfills.ts El archivo de configuración se crea como parte de la carpeta de su proyecto. Este archivo incorpora los polyfills obligatorios y muchos de los opcionales como JavaScript import declaraciones.

• Los paquetes npm para el obligatorio polyfills (como zone.js) se instalan automáticamente cuando crea su proyecto con ng new, y su correspondiente import declaraciones ya están habilitadas en el src/polyfills.ts archivo de configuración.

• Si necesitas un Opcional polyfill, debe instalar su paquete npm, luego descomentar o crear la declaración de importación correspondiente en el src/polyfills.ts archivo de configuración.

Por ejemplo, si necesita el opcional animaciones web polyfill, puedes instalarlo con npm, usando el siguiente comando (o el yarn equivalente):

# install the optional web animations polyfill
  npm install --save web-animations-js

A continuación, puede agregar la declaración de importación en el src/polyfills.ts expediente. Para muchos polyfills, simplemente puede descomentar el correspondiente import en el archivo, como en el siguiente ejemplo.

/**
  * Required to support Web Animations `@angular/platform-browser/animations`.
  * Needed for: All but Chrome, Firefox and Opera. https://caniuse.com/web-animation
  **/
  import 'web-animations-js';  // Run `npm install --save web-animations-js`.

Si el polyfill que desea no está ya en polyfills.ts archivo, agregue el import declaración a mano.

Polyfills obligatorios

Estos son los polyfills necesarios para ejecutar una aplicación Angular en cada navegador compatible:

Funciones de navegador opcionales para polyfill

Algunas características de Angular pueden requerir polyfills adicionales.

Polyfills sugeridos

Los siguientes polyfills se utilizan para probar la estructura en sí. Son un buen punto de partida para una aplicación.

* Las cifras son para código minificado y comprimido con gzip, calculado con el compilador de cierre.

Polyfills para usuarios que no tienen CLI

Si no está utilizando la CLI, agregue sus scripts de polyfill directamente a la página web del host (index.html).

Por ejemplo:

<!-- pre-zone polyfills -->
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/web-animations-js/web-animations.min.js"></script>
  <script>
    /**
     * you can configure some zone flags which can disable zone interception for some
     * asynchronous activities to improve startup performance - use these options only
     * if you know what you are doing as it could result in hard to trace down bugs..
     */
    // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
    // __Zone_disable_on_property = true; // disable patch onProperty such as onclick
    // __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
    /*
     * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
     * with the following flag, it will bypass `zone.js` patch for IE/Edge
     */
    // __Zone_enable_cross_context_check = true;
  </script>
  <!-- zone.js required by Angular -->
  <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
  <!-- application polyfills -->