Mejoras y cambios con Angular 8

Publicado por Jesus Cuesta Arza el

Angularangular8angularclijavascriptwebworkers

El 28 de Mayo se liberó por completo la nueva versión de Angular, versión 8. Con algunos cambios esperados y con otros opcionales. ¿Cuáles son los cambios más relevantes? ¿Qué cambios hay en las dependencias? ¿Cambia la estructura del proyecto?

Más o menos, cada 6 meses esperamos una nueva versión de Angular, que nos aporte nuevas mejoras, elimine ciertas deficiencias del framework, actualice las dependencias y añada alguna nueva funcionalidad que nos sorprenda. Esta nueva versión incluye algunos breaking changes, pero los de Google nos han facilitado una guía para hacernos más fácil esta migración. Aunque es cierto que algunos de los problemas que nos encontraremos si migramos nuestro proyecto, puede que no estén indicados. En un artículo posterior indicaremos como migrar paso a paso y cómo solventar dichos hitos.

Top Novedades

Las novedades más importantes que nos encontraremos serán:

Mejoras:

  • Mejora del rendimiento interno del framework
  • Mejora del compilador
  • Facilidades para las migraciones de versiones anteriores
  • Soporte y generador de webworkers
  • Mejoras en los Service Workers
  • Mejoras en Ivy
  • Mejoras en los Forms

Cambios

  • Nuevas funcionalidades en el routing de Angular
  • Cambio en las versiones de las dependencias de Angular
  • Cambios en HttpClient y RXjs
  • Cambio en la versión de node, nos sugieren la 12
  • Se incluye Browserslist

Deprecations

Aquí podéis consultar la guía para elementos deprecados y como migrarlos con Angular.

Breaking Changes

  • Cambios en el uso de ViewChild y ContentChild
  • TestBed.get: Para los test, el usarlo como any está ahora deprecado
  • @angular/http: ha sido eliminado y debería ser sustituido por @angular/common/http
  • Typescript: Deprecadas las versiones 3.1 y 3.2, deberemos usar 3.4

Análisis paso a paso

Vamos a instalar una aplicación de Angular 8, y vamos a analizar las partes que han ido cambiando en esta versión y como ejecutar algunas de las funcionalidades nuevas.

Instalación de Angular 8

Antes de comenzar con la instalación del CLI de Angular, deberemos tener previamente instalado Nodejs y para los que usen Mac, puede que Brew. En estos pasos, lo vamos a realizar con Windows, y con Nodejs versión 12.3.1 y npm 6.9.0.

Para aquellos que no hayan trabajado nunca con Angular, aconsejamos el uso de Angular CLI, que nos facilitará todo el trabajo de generar el proyecto y las piezas de Angular. Siguiendo las instrucciones de la página, abrimos una terminal y ejecutamos:

npm install -g @angular/cli  
ng new my-dream-atsistemas  
cd my-dream-atsistemas  
ng serve

Cambios en las Dependencias

De los cambios mencionados anteriormente, si vamos al fichero package.json, podremos comprobar los siguientes cambios:

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  }

De los cambios anteriores, los que más se harán notar serán todas las versiones de Angular subidas a la 8.0.0. Porque aunque en nuestro proyecto las actualicemos y no suframos demasiados cambios, si tenemos alguna dependencia de terceros que también use dicha librería pero con una versión anterior, nos dará conflictos.  Un ejemplo claro, por experiencia personal, es con @angular/forms 7.

En cuanto a las devDependencies:

"devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.1",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

Deberemos también actualizarlas, y en el caso de algunas de ellas, nos dará error al compilar el proyecto si no lo hacemos, como por ejemplo Typescript. Además de que necesitaremos algunas de ellas para poder utilizar las nuevas funcionalidades.

Cambios en el Routing

Uno de los cambios más significativos es el cambio para el lazy loading de Angular. Aunque si no cambiamos la forma en lo que hacemos, por ahora no nos dará problemas, lo ideal sería que lo actualizásemos.

Antes

{ path: '/cejs', loadChildren: './cejs/cejs.module#CEJSModule' }

Ahora

{ path: `/cejs`, loadChildren: () => import(`./cejs/cejs.module`).then(m => m.CEJSModule) }

Cambios en ViewChild / ContentChild

Ahora deberemos declarar si son estáticos o no.

Antes:

@ViewChild('atsistemasDiv') atsistemasDiv: ElementRef<HTMLDivElement>;

Ahora:

@ViewChild('atsistemasDiv', { static: true }) atsistemasDiv: ElementRef<HTMLDivElement>;

Activar Ivy

En estos momentos sigue siendo opcional el uso de Ivy en las aplicaciones Angular, pero podemos activarla o comenzar con ella desde el principio.

// Creamos un proyecto con Ivy activada
ng new shiny-ivy-app --enable-ivy

Actualizamos el angularCompilerOptions que encontraremos en ts.config.app.json:

{
  "compilerOptions": { ... },
  "angularCompilerOptions": {
    "enableIvy": true
  }
}

Por último, en nuestro archivo de configuración angular.json, lo actualizamos para conseguir con aot más velocidad:

{
  "projects": {
    "my-existing-project": {
      "architect": {
        "build": {
          "options": {
            ...
            "aot": true,
          }
        }
      }
    }
  }
}

WebWorkers

Se ha añadido soporte en Angular 8. Ahora podremos añadirlos y configurarlos:

// Creando nuestro webworker
ng g webWorker <name>

Service Worker

Se han añadido algunas mejoras. Si ya estábamos usando las PWA tendremos disponibles:

  • Nueva opción: SwRegistrationOptions
  • Soporte para múltiples apps en un dominio

Angular Firebase

Si estabas usando Angular Firebase, ahora podrás desplegarlo usándo Angular CLI:

ng run [PROJECT_NAME]:deploy

Forms

Se incluyen algunas nuevas funciones para usar con los Forms:

markAllAsTouched

El AbstractControl ofrece ahora una nueva función markAllAsTouched, que esta disponible con todas las entidades reactivas:

form.markAllAsTouched();

Nos marca un control como touched pero también lo hace para todos sus hijos.

FormArray.clear

Nos borrará todos los controls que contenga:

// `users` is initialized with 2 users
const users = fb.array([user1, user2]);  
users.clear();  
// users is now empty

Aquí terminamos este artículo, ¡no dudes en seguirnos en Twitter para estar día de nuevos posts!

Bibliografía

Otros artículos relacionados