Por Jesús Cuesta Arza
El pasado 18 de octubre se lanzó Angular 7, la nueva versión del framework de aplicaciones web que cuenta con corrección de errores, nuevas funcionalidades y nuevas versiones para Typescript y RxJS. Ante esta nueva actualización, son varias las preguntas que nos surgen: ¿Cómo puedo subir de versión? ¿Realmente vale la pena cambiar?
Como ya nos tenía avisado el equipo de Google, cada seis meses aproximadamente van a seguir liberando major versions de esta plataforma, añadiendo nuevas funcionalidades, corrigiendo errores y adaptándose al mercado. Esta vez nos toca hablar de la versión 7, cómo podemos subir a esta versión, qué mejoras tiene y si vale la pena hacer el update.
Las nuevas características que se incorporan en esta nueva versión y que nos indican en su changelog son:
- core: add DoBootstrap interface. (#24558) (732026c), closes #24557
- compiler: add "original" placeholder value on extracted XMB (#25079) (e99d860)
- compiler-cli: add support to extend angularCompilerOptions (#22717) (d7e5bbf), closes #22684
- bazel: add additional parameters to ts_api_guardian_test def (#25694) (2a21ca0)
- elements: enable Shadow DOM v1 and slots (#24861) (c9844a2)
- platform-server: update domino to v2.1.0 (#25564) (3fb0da2)
- router: warn if navigation triggered outside Angular zone (#24959) (010e35d), closes #15770 #15946 #24728
- router: add UrlSegment[] to CanLoad interface (#13127) (07d8d39), closes #12411
Por otro lado, las versiones de las librerías más importantes que cambian son:
- @angular/core now depends on
- TypeScript 3.1
- RxJS 6.3
- @angular/platform-server now depends on Domino 2.1
Sin embargo, tampoco podemos olvidarnos del listado de bugs que se corrigen en esta versión. Dado que el listado es bastante amplio, os remitimos a su página oficial: https://github.com/angular/angular/blob/master/CHANGELOG.md
Si, una vez que vemos estos cambios, decidimos que queremos usar la nueva versión de Angular, nos podríamos encontrar en dos situaciones: que deseemos empezar un proyecto desde cero o que queramos subir a la versión 7 en un proyecto ya creado.
1.- Proyecto desde cero
Para ello, si ya teníamos instalada la librería de Angular CLI, deberemos desinstalarla, vaciar el caché y luego instalar la última versión.
npm uninstall -g angular-cli
npm cache clean or npm cache verify (if npm > 5)
npm install -g @angular/cli@latest
Una vez realizado este paso, sería tan sencillo como generar un nuevo proyecto con el comando “ng new nombre-proyecto”.
2.- Hacer upgrade a versión Angular 7
Para ello, deberíamos partir de una versión de Angular 6. Ya que, si recordamos, en esta versión se introdujeron cambios en la estructura base del proyecto, así como en las dependencias.
Si ya tenemos nuestro proyecto con la versión de Angular 6, solamente deberíamos usar este comando:
“ng update @angular/cli @angular/core”
Además, como indican en su blog, sería interesante revisar en los polyfills si tenéis activado el reflect, y actualizar el angular.json para reducir el tamaño de los budgets:
"budgets":
[{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
Además del resumen de las mejoras indicadas en el changelog, podríamos destacar otras, tal y como se indica en el blog de angular:
- Mejora en el rendimiento de la aplicación.
- Utilización de la nueva versión de Typescript y RxJS.
- Uso de las nuevas versiones y funcionalidades de Angular y el CDK.
- Mejora en la accesibilidad.
- Angular Elements ahora permite la compatibilidad con los estándar custom elements.
Por desgracia aún no van a incluir la funcionalidad Ivy, la cual es posible que la acaben liberando en la versión 8.
Algunos expertos y empresas pueden estar en contra de cambios y evoluciones tan rápidas con Angular, pero no hay que olvidar que no sobrevive el más fuerte sino el que más rápido se adapta.