Angular 5 (actualice su proyecto de una versión anterior a Angular 5)

Si todavía está trabajando en angular 2, 4, entonces es el momento de actualizar su aplicación a angular 5. Angular 5 (también llamado donut pentagonal) tiene muchas características nuevas, mejor rendimiento, agrupación pequeña.

Si desea actualizar su antigua aplicación angular 2 al angular 5, este tutorial es para usted.

La actualización de angular 2, 4 a angular 5 no es una tarea demasiado difícil porque hay muy pocos cambios de rotura. El equipo de Angular también ha puesto una herramienta práctica para hacer la actualización de cualquier versión a angular 5, lo más simple posible.

Estos son algunos puntos que debe tener en cuenta al actualizar su aplicación:

Cambie el nombre de todas las etiquetas de su proyecto a etiquetas, ya que el elemento ha quedado obsoleto desde la v4.

Deberá actualizar todos sus paquetes angulares a la versión 5.0, ejecute el siguiente comando:

$ npm install @ angular / {animaciones, común, compilador, compilador-cli, núcleo, formularios, http, plataforma-navegador, plataforma-navegador-dinámico, plataforma-servidor, enrutador} @ 5.0.0

# o, usando hilo:

$ yarn add @ angular / {animaciones, común, compilador, compilador-cli, núcleo, formularios, http, plataforma-navegador, plataforma-navegador-dinámico, plataforma-servidor, enrutador} @ 5.0.0

Angular 5 ahora también depende de TypeScript 2.4.2 y RxJS 5.5.2, por lo que tendrá que actualizar esos paquetes también.

npm instala typescript@2.4.2 --save-exact

Si confía en los canales de fecha, moneda, decimales o porcentaje, en 5 verá cambios menores en el formato. Para aplicaciones que usen configuraciones regionales que no sean en-us, deberá importarlo y opcionalmente locale_extended_fr de @ angular / common / i18n_data / locale_fr y registerLocaleData (local). Para obtener más información sobre los cambios de rotura de tuberías: stackoverflow.com/a/47263949/2810015

El uso de implementos en lugar de se extiende con cualquier evento de ciclo de vida: asegúrese de no utilizar extends OnInit, o use extends para cualquier evento de ciclo de vida. En cambio, usa implementos.

Cambie de HttpModule y el servicio Http a HttpClientModule y al servicio HttpClient. HttpClient simplifica la ergonomía predeterminada (Ya no necesita mapear a json y eliminar cualquier llamada de mapa (res => res.json ()), que ya no es necesaria) y ahora admite valores de retorno e interceptores tipados.

Aquí hay un ejemplo rápido de la vieja sintaxis:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/do';
@Component({... })
export class AppComponent extends OnInit {

myObs = Observable.of('Hello', 'Alligator', 'World!');

ngOnInit() {
this.myObs
.do(x => console.log('The do operator is the do operator!'))
.filter(x => x.length > 8)
.map(x => x.toUpperCase())
.subscribe(x => console.log(x));
}
}