Hacer compatible Angular 9 con Internet Explorer

En este mini-tutorial vamos a ver que pasos tienes que hacer para que tu proyecto Angular 9 (también es compatible con Angular 8) compilado funcione correctamente en todos los navegado, incluido el odioso Internet Explorar.

Paso 1: Polyfills.ts

En el fichero polyfills.ts, descomenta estas dos líneas:

  import 'classlist.js';
  import 'web-animations-js';

Una vez descomentadas, necesitaremos instalar los paquetes de classlist y web-animations-js. Así abriremos un terminal y navegaremos hasta el directorio de nuestro proyecto. Una vez allí, ejecutamos:

npm install --save classlist.js
npm install --save web-animations-js

En el fichero polyfills.ts, asegurate de tener importado zone.js
Se supone que viene por defecto con angular-cli, pero algunos me han reportado problemas y era debido a esto.

import 'zone.js/dist/zone';  // Included with Angular CLI.

Paso 2: tsconfig

Vamos a crear un acrchivo en la raiz de nuestro entorno de trabajo (junto al tsconfig.json) llamado «tsconfig.es5.json» con el siguiente contenido

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
      "target": "es5"
  }
}

Paso 3: angular.json

En el fichero angular.json, vamos a agregar una nueva configuración a nuestro proyecto. En las secciones «build» y «serve», necesitamos agregar una nueva configuración «es5», para especificar el nuevo tsconfig creado, y su uso en el comando serve.

// sección build > configurations > production
            "es5": {
              "tsConfig": "./tsconfig.es5.json"
            }

// Sección serve:
            "es5": {
              "browserTarget": ":build:es5"
            }

Nuestro angular.json quedaría así en las secciones build y serve

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "es5": {
              "tsConfig": "./tsconfig.es5.json"
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": ":build"
          },
          "configurations": {
            "production": {
              "browserTarget": ":build:production"
            },
            "es5": {
              "browserTarget": ":build:es5"
            }
          }
        },

En <nombre-de-tu-app> debes poner el nombre de tu aplicación y (como es lógico, en las secciones style y scripts debes tener importado todo aquello que necesites.

Paso 4: browserslist

En el fichero browserslist, quitar el not de la línea not IE 9-11.

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
// not IE 9-11 # For IE 9-11 support, remove 'not'.
IE 9-11 # For IE 9-11 support, remove 'not'.

Paso 5: index.html

En el fichero index.html, añadiremos dentro del <head>:


All is done!

Con esto ya tendremos nuestro proyecto compatible. pero hay un par de detalles que debes tener en cuenta:

  • Si lanzas un «ng serve» sin parametros, tu proyecto seguirá siendo compatible sólo con chrome (yo lo uso así para desarrollar)
  • Si quieres lanzar un «ng serve» compatible con IE, debes hacerlo con el parámetro «–configuracion es5» para que cargue la configuración y quedaría así:

ng serve --configuration es5

  • Una vez conpiles con –prod para publicar tu proyecto, se realizarán dos compilaciones, una para es2015 y otra para es5 dando como resultado esta lista de ficheros (este es un ejemplo de un proyecto real donte tb hay agregados primeng y fontawesome)
      assets
38024 3rdpartylicenses.txt
370756 5-es2015.e783c2997b5e11df7397.js
372417 5-es5.e783c2997b5e11df7397.js
10355 color.6441e63a57ccc5105bad.png
132728 fa-brands-400.1437eef49e3db661f92c.ttf
133034 fa-brands-400.3825c40fd00d9bbb76b7.eot
715890 fa-brands-400.55faa7ef298ebafcc322.svg
76548 fa-brands-400.9a01a31d6767f82529dc.woff2
89824 fa-brands-400.e1c1a88e6228f902435e.woff
13600 fa-regular-400.5fab4ed5c3745c12c7e1.woff2
34092 fa-regular-400.814c2c571f030686e71c.ttf
16800 fa-regular-400.acdccc059cdf7b4063e9.woff
34390 fa-regular-400.eb99d5076e8ce45ccfa1.eot
144322 fa-regular-400.fa5f132deb163050a148.svg
76120 fa-solid-900.0f27e9b933cc50abbbba.woff2
193792 fa-solid-900.8618686494a5c8092120.ttf
194078 fa-solid-900.a0b3c6d0d774520787d8.eot
849240 fa-solid-900.a84653d4fe0072d182b6.svg
99004 fa-solid-900.afbdcbccd6861d9cdc38.woff
168641 favicon.ico
  293 hue.f8505bd4d6f3e3aa435b.png
 1938 index.html
13112 line.39c65dcc08f7edb347b6.gif
 9427 loading.9347db5956a89b0bab38.gif
897689 main-es2015.cec9e5f30730177c99be.js
1004458 main-es5.cec9e5f30730177c99be.js
27604 open-sans-v15-latin-300.252a41f69d4c320154a1.ttf
15545 open-sans-v15-latin-300.2aeabc9e8ed0aef227d7.eot
55181 open-sans-v15-latin-300.bb3b405a4608d51ddb13.svg
18280 open-sans-v15-latin-300.df17d4e30091735253a8.woff
14564 open-sans-v15-latin-300.f2ebdee8c2343f558a02.woff2
18476 open-sans-v15-latin-700.2509c35b0cfc629f81e5.woff
14720 open-sans-v15-latin-700.7435e6c2064f36f48626.woff2
15667 open-sans-v15-latin-700.75e0e55bdb3e82dcacf8.eot
55652 open-sans-v15-latin-700.926388f043fc8117b35b.svg
28192 open-sans-v15-latin-700.ec32d6be7329ece0789c.ttf
56266 open-sans-v15-latin-regular.1d0d8b66fa1da76d69b9.svg
26488 open-sans-v15-latin-regular.61747992dd9a412e601e.ttf
17704 open-sans-v15-latin-regular.87a454b233bedae23f8d.woff
15050 open-sans-v15-latin-regular.a356e361ee6765f3d6d4.eot
14048 open-sans-v15-latin-regular.ec806460121999bcfb12.woff2
  118 password-meter.eea288d50533d7995ec1.png
85747 polyfills-es2015.16ceb16b32a8545e7574.js
180943 polyfills-es5.006e024480b437b2c337.js
39572 primeicons.04701ca33ce96d325419.ttf
39648 primeicons.1d79a0559e5f13294dee.woff
39748 primeicons.c2e128a00fca2640240d.eot
163568 primeicons.fa2c83d2f35244bb10dc.svg
 2289 runtime-es2015.2e6109e62d8c1599b4b0.js
 2286 runtime-es5.2e6109e62d8c1599b4b0.js
557012 scripts.d206f7319f6122bd4e1d.js
407942 styles.47345563e6287b4278d5.css

Con esto ya lo tendrías todo! espero que te sea de utilidad !

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.