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 !
