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

stackoverflow abril 2018

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.