Angular 4 ha sido liberado y ya se puede utilizar en nuestros proyectos, han habido muchos cambios pero lo mejor de todo es que se ofrece compatibilidad 100% con versiones anteriores de Angular, por lo que nuestro código no tendrá que ser modificado.
El principal motivo para dar el salto de la versión 2 a la versión 4 es poder hacer match con el router de Angular, ya que éste ya estaba en la versión 3.
Te invito a que revises el changelog para que estés al tanto de todo lo que sucede con esta nueva versión, a lo largo de este año saldrán nuevas versiones así que habrá que estar preparado.
Actualizar a Angular 4
Para poder actualizar tu proyecto a la nueva versión simplemente deberás ejecutar el siguiente comando y asegurarte que estás utilizando Typescript v2.1.6 o superior.
|
1 |
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next --save |
Si utilizas animaciones también tendrás que instalar el paquete de animaciones @angular/animationse e importar el módulo en el módulo principal.
|
1 |
import BrowserAnimationsModule from @angular/platform-browser/animations |
Mejoras en Angular 4
Entre las mejoras que destacan tenemos una gran optimización interna en Ahead of Time (AOT) para minimizar la cantidad de código generado por los componentes y hacer más rápida la compilación.
También se ha mejorado la sintaxis del *ngIf, ahora podemos utilizar else, aunque la sintaxis anterior funciona perfectamente.
|
1 2 3 4 |
<div #loading>Loading...</div> <div *ngIf="userObservable | async; else loading; let user"> {{ user.name }} </div> |
Otro punto que quizá te interese es que Anguar 4 es compatible con StrictNullChecks de typescript.
Se continúa el trabajo con AngularUniversal, el proyecto que permite a los desarrolladores ejecutar Angular en el servidor con NodeJS y Express, habrá que estar al tanto, aquí tienes un repo con un claro ejemplo.
Puntos de ruptura
El único punto de ruptura a tener en cuenta son los hooks, ahora la compilación fallará si utilizamos extends de la siguiente forma ya que pasan a ser interfaces.
|
1 2 |
@Component() class SomeComponent extends OnInit {} |
Para evitar este problema simplemente debemos utilizar implements.
|
1 2 |
@Component() class SomeComponent implements OnInit {} |
[button-red url=”https://www.cursosdesarrolloweb.es/course/aprende-angular-2-desde-0/” target=”_blank” position=”center”] Recuerda que tienes disponible el Curso de Angular el cual es completamente compatible con la nueva versión[/button-red]
