Actualización de angular 5 a 6
El jueves 3 de mayo salió oficialmente la actualización de angular, la cual es de 5.2 a 6, entonces estamos casi obligados a tener esta actualización de angular 6 para tener estas mejoras.
Qué hay detrás de la actualización de angular
Principalmente se actualizaron el core para mejor rendimiento a la hora de compilacion y ejecucion.
Se actualizo:
- core
- common
- compiler
- angular cli
- angular material
- cdk
todos estos a la versión 6
Novedades de la actualización de angular 6
ng update <packege>: es un nuevo comando de angular cli, con esto analizamos nuestro package.json , es recomendado para actualizacion nuestra aplicación.
pero no solo sirve para eso con esta linea tambien tendremos actualizados nuestros paquetes de 3eros.
hay que recordar que este comando no reemplaza npm
ng add <package> : otro nuevo comando de angular cli, este sirve para agregar de forma fácil nuevas “capacidades” a nuestro proyecto, es decir con esto hace la descarga de nuevas dependencias e instalación de los script.
Algunos ejemplos:
ng add @angular/pwa – Convierte nuestra web en un PWA (Progressive web app), con esto nos quitan el trabajo de crear nuestro manifest y nos trae ya una plantilla optimizada.
ng add @ng-bootstrap/schematics – agregamos bootstrap optimizado para angular en nuestra aplicación.
ng add @angular/material – Agregar material design a nuestro proyecto.
ng add @clr/angular@next – Instala Clarity de VMWare (posiblemente veamos un poco de esto más adelante).
ng add @angular/elements – con este podemos agregar document-register-element.js que son dependencia de polyfill.
Angular Element
Angular element de las primeras versiones que aparece, la caracteristica principal es que puedes exportar componentes y luego usarlo en otros proyectos.
han puesto un video de un miembro de la comunidad que explica un poco sobre los beneficios, esta es la documentación de angular 6.
Angular material componente de inicio
uno de las ventajas que trae la actualización de angular es que puedes iniciar una plantilla con angular material, como esta en el ejemplo, la ventaja es que hay 3 plantillas nuevas,:
1 – Material Sidenav
ng generate @angular/material:material-nav –name=my-nav
2 – Material Dashboard
ng generate @angular/material:material-dashboard –name=my-dashboard
3 – Material Data Table
ng generate @angular/material:material-table –name=my-table
Cli Workspaces
Uno de los cambios mas importantes en la nueva actualización de angular es que se cambió de nombre y de estructura el archivo .angular-cli.json por angular.json, esto trae sus ventajas como múltiple proyectos, la estructura quedó de la siguiente manera:
{ "projects": { "my-project-name": { "projectType": "application", "architect": { "build": { "configurations": { "production": {}, "demo": {}, "staging": {}, } }, "serve": {}, "extract-i18n": {}, "test": {}, } }, "my-project-name-e2e": {} }, }
para una explicación más detallada podemos entrar en la siguiente wiki de angular.
librerías de soporte
Ahora con esta nueva actualización de angular podemos crear nuestras propias librerías y ponerlas en producción, podemos crear nuestras librerias y luego subirlas a npm.
ng generate library <name>
si tenemos alguna libreria de 3eros o nuestras propias librerías tenemos que hacer lo siguiente
npm install library-name
import { something } from ‘library-name’;
para mayor información esta es la wiki
Tree Shakeble providers
Aquí lo que se hace es disminuir el código para los servicios, ahora solamente declaras lo que necesitas en el servicio sin agregar la ruta y declararlo en el módulo.
Antes
@NgModule({ ... providers: [MyService] }) export class AppModule {}
import { Injectable } from '@angular/core'; @Injectable() export class MyService { constructor() { } }
ahora no se necesita referencias el NgModule
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class MyService { constructor() { } }
Mejora de rendimiento de animación
Ahora ya no se necesita polyfill de animación web, esto hace que reduzca 47KB en el tamaño de paquete y con esto aumenta el rendimiento de las animaciones.
LTS (soporte extendido)
Actualmente las versión más viejas de angular ya no tienen soporte, pero a partir de este cambio las versiones v4 a la v6 tendrán un soporte de 18 meses, donde se divide en 6 meses de desarrollos y 12 meses para corrección de error críticos de seguridad .
Como actualizar angular 5 a 6
El equipo de angular nos ha proporcionado una página donde nos dice como actualizar cualquier versión de angular a la versión 6 nosotros nos centraremos de la 5 a la 6.
- cambiar HttpModule a HttpClientModule
- Actualizar node a la version 8 o superior
- actualizar los siguientes componentes de angular cli
- npm install -g @angular/cli
- npm install @angular/cli
- ng update @angular/cli
Si tenemos problemas en este último punto vamos a hacer lo siguiente
vamos a poner:
ng –version
la mia salio con 1.4.3 entonces vamos a migrar de la siguiente manera
npm install –save-dev @angular/cli@v6.0.0-rc.4
luego
ng update @angular/cli –migrate-only –from=1.4.3
Podemos repetir los pasos y pasar a la versión 6 o simplemente quitan -rc.4
El siguiente paso es:
- ng update @angular/core
si les aparece el siguiente error
Tienen que actualizar sus paquetes individualmente
en mi caso
- por el momento angularfire2 es incompatible con angular 6 y como no lo usaba lo borre “npm uninstall firebase angularfire2”
- npm i @angular/cdk
- npm i codelyzer
si aun asi sigue saliendo errores les recomiendo lo siguiente.
- Crear nuevo proyecto con angular 6
- abrir package.json (nuevo proyecto y el que van a actualizar)
- copiar las versiones de las librerias
- en el proyecto que actualizamos abrir consola de comando y escribir npm install
Siguiente paso:
- ng update @angular/material
- ng update
con este último comando podemos ver que paquete está desactualizado
ahora vamos a remover RXJS basura usando rxjs-tslint auto update rules.
vamos a usar los siguientes comandos
- npm install -g rxjs-tslint
- rxjs-5-to-6-migrate -p src/tsconfig.app.json
Error en material Design
Yo usaba normalmente la MatIcon, pero no se exportaba en el ng module, ahora hay que exportarlo de la siguiente manera
import {MatIconModule} from ‘@angular/material
con esto arreglamos el error del maTIcon.
Con esto actualizamos Angular de la versión 5 a la 6 si tienen dudas o errores dejen en el comentario y trataremos de resolverlo.