Hola programadores, si aún está trabajando en angular 2, 4, entonces es el momento de actualizar su aplicación a angular 5. Angular 5 (también llamado Pentagonal-donut) tiene muchas características nuevas, mejor rendimiento, pequeños paquetes.

Si desea actualizar su antigua aplicación angular 2 a 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 ruptura. El equipo de Angular también ha puesto una herramienta útil para hacer que la actualización de cualquier versión a angular 5 sea 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 a etiquetas de su proyecto ya que el elemento ha quedado en desuso desde v4.

Tendrá que 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 también tendrá que actualizar esos paquetes.

npm instale typescript@2.4.2 –save-exact

Si confía en las tuberías de fecha, moneda, decimal o porcentaje, en 5 verá cambios menores en el formato. Para aplicaciones que usen configuraciones regionales distintas de 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 las tuberías que rompen los cambios: stackoverflow.com/a/47263949/2810015

El uso de implementos en lugar de se extiende con cualquier evento del ciclo de vida: asegúrese de no usar OnInit, o el uso se extiende a cualquier evento del ciclo de vida. En su lugar, utilice implementos.

Cambie de HttpModule y el servicio Http a HttpClientModule y el servicio HttpClient. HttpClient simplifica la ergonomía predeterminada (ya no necesita mapear a json y eliminar las llamadas de mapa (res => res.json ()), que ya no son necesarias). Y ahora admite valores de retorno e interceptores escritos.

Aquí hay un ejemplo rápido de la sintaxis antigua:

importe {Componente, OnInit} desde ‘@ angular / core’;

importar {Observable} desde ‘rxjs / Observable’;

importar ‘rxjs / add / observable / of’;

importar ‘rxjs / add / operator / map’;

importar ‘rxjs / add / operator / filter’;

importar ‘rxjs / add / operator / do’;

@Componente ({…})

La clase de exportación AppComponent extiende OnInit {

myObs = Observable.of (‘Hola’, ‘Cocodrilo’, ‘Mundo!’);

ngOnInit () {

esto.myObs

.do (x => console.log (‘El operador do es el operador do!’))

.filter (x => x.length> 8)

.map (x => x.toUpperCase ())

.subscribe (x => console.log (x));

}

}

… y el mismo ejemplo con la nueva sintaxis del operador permisible se convierte en:

importar {de} desde ‘rxjs / observable / of’;

importar {map, filter, tap} desde ‘rxjs / operator’;

@Componente ({…})

La clase de exportación AppComponent implementa OnInit {

myObs = de (‘Hola’, ‘Cocodrilo’, ‘Mundo!’);

ngOnInit () {

esto.myObs

.pipe (

toque (x => console.log (‘El operador do ahora es toque!’)),

filtro (x => x.length> 8),

mapa (x => x.toUpperCase ())

)

.subscribe (x => console.log (x));

}

}

Dejar respuesta

Please enter your comment!
Please enter your name here