Skip to content
Aprende Angular de forma rápida y efectiva  Ver curso

¿Angular 2 o Angular 4? – Simplemente Angular

Hay una pregunta que me persigue a todas horas vaya a donde vaya… ¿Qué es eso de Angular 4?

La pregunta adopta varios matices: ¿Que pasará con Ionic 2 ahora que ha salido Angular 4? ¿Tengo que elegir entre aprender Angular 2 o 4? …

 
Quédate tranquilo.

 
En serio.

 
No sufras más.

 
Angular 4 no es un cambio radical como pasó tras AngularJS. Angular 4 es simplemente Angular. Igual que Angular 2. Deja que te lo explique…

Angular adopta SEMVER

El motivo detrás de toda esta discusión, es la adopción por parte de Angular de lo que se conoce como Semantic Versioning (o SEMVER).

¿Que es el Semantic Versioning?

El sistema SEMVER es un conjunto de reglas para proporcionar un significado claro y definido a las versiones de proyecto de software.

El sistema SEMVER se compone de 3 números, siguiendo la estructura X.Y.Z, donde:

  • X se denomina Major: indica cambios rupturistas
  • Y se denomina Minor: indica cambios compatibles con la versión anterior
  • Z se denomina Patch: indica resoluciones de bugs (compatibles)

Básicamente, cuando se arregla un bug se incrementa el patch, cuando se introduce una mejora se incrementa el minor y cuando se introducen cambios que no son compatibles con la versión anterior, se incrementa el major.

Así de fácil. De este modo cualquier developer sabe qué esperar ante una actualización de su librería favorita.

Si sale una actualización donde el major se ha incrementado, sabes que tendrás que ensuciarte las manos con el código para pasar una app existente a la nueva versión.

¿Que tiene esto que ver con Angular?

Cuando en 2016 se publicó la versión estable de Angular 2, decidieron adoptar el sistema SEMVER. De este modo, Angular 2 pasó a llamarse Angular (a secas) en su versión 2.0.0.

¿Entonces… hay cambios rupturistas en Angular 4?

¿rupturistas?

¿Cómo de rupturistas?

Esta claro que todo proyecto de SW que quiera avanzar a buena velocidad, en algún momento introducirá cambios que por desgracia no serán compatibles con versiones anteriores, forzándote a tocar tu código para actualizarte.

Sin embargo, no estamos hablando de cambios críticos sino menores. Por ejemplo, el mero hecho de actualizar la versión de TypeScript que usa Angular de la v1.8 actual a la v2.2, implicará cambios no compatibles.

Angular 4 es solo la mejora a medio plazo del Angular 2 actual, en la que se ha ido trabajando de forma paralela sin aplicar restricciones de compatibilidad.

Como verás en el resumen de cambios es prácticamente idéntico.

¿Por qué Angular 4?

Buena pregunta. Lo lógico sería que la siguiente versión sea la Angular 3 ¿no?

El problema es que las librerías core de Angular están en un único repositorio de GitHub (github.com/angular/angular) y todas ellas usan SEMVER pero se distribuyen como paquetes separados de NPM.

Pues resulta, que mientras el resto de paquetes de Angular 2.4.0 están justamente en esa versión (@angular/core, @angular/http, etc) el paquete @angular/router está en su versión 3.4.0 debido a cambios no retrocompatibles que se hicieron en su momento a nivel interno.

El equipo de Angular pensó que era mejor pasar directamente a la versión 4 y así volver a tener todos los paquetes de Angular alineados a la misma versión, haciendo más sencillo un futuro mantenimiento de las librerías.

Entonces…¿lo llamo Angular, o qué?

A la hora de citar Angular, deberías usar:

  • AngularJS: Si te refieres a Angular 1.x o anterior
  • Angular: Si te refieres a Angular 2.x o posterior, de forma genérica
  • El número de versión (Angular 2.4, 4.0, etc): Si te refieres a la release que contiene una característica concreta
  • La versión SEMVER completa (Angular 2.2.3): Si quieres indicar la versión que contiene un bug concreto .

En mis artículos intento seguir esta nomenclatura, así que ya sabes, cuando digo AngularJS me refiero a la versión 1 de Angular, mientras que cuando digo Angular me refiero en general a la versión más reciente, la linea que siguen Angular 2 y 4.

Novedades de Angular 4.0

Los principales cambios que incorpora Angular 4 son:

Sintaxis ifelse dentro de los templates

En Angular 4 la directiva estructural *ngIf acepta un parámetro else asociado a un ng-template que se mostrará en caso de no cumplirse la condición del if.

<!-- if/else syntax example -->
<ng-template #forbidden>
  <p>Sorry, you are not allowed to read this content</p>
</ng-template>

<p *ngIf="isAuth; else forbidden;">
  <p>Some secret content</p>
</p>

Módulo de animación separado

Este, por ejemplo, es un cambio que SI rompe con la compatibilidad.

  • En la versión anterior, la librería de animaciones de Angular pertenecía al paquete @angular/core.
  • En Angular 4 en cambio, las animaciones se han movido a su propio módulo: @angular/animations.

La finalidad de este cambio es reducir el tamaño de tu app en caso de que no uses su sistema de animaciones. La contrapartida, no obstante, es que si te actualizas a Angular 4 y sí hacías uso del módulo de animaciones, tendrás que actualizar 1 línea de código para que funcione.

Uso de StrictNullChecks de TypeScript

Javascript diferencia entre los tipos null y undefined, pero con la versión anterior de TypeScript no era posible darle esos valores a una variable de otro tipo.

En la nueva versión, TypeScript permite definir explícitamente cuales de estos tipos que puede tener una variable.

//strict null checks example
let a = String | null; // puede ser null
let b = Number | undefined; // puede ser undefined
let c = Array<Number> | null | undefined; // puede ser null o undefined

Integración de Angular Universal como módulo de Angular

Angular Universal es la solución que proporciona Angular para el Server-side rendering, es decir, para servir tu contenido ya renderizado desde el servidor (con el objetivo de mejorar tu SEO, servir más rápido la página inicial, etc).

Hasta ahora el paquete Angular Universal era algo completamente externo a Angular, pero a partir de Angular 4 ha pasado a convertirse en un módulo propio de Angular, accesible en @angular/platform-server.

Mejoras de rendimiento gracias a FESM

La nueva versión de Angular incluye versiones planas de sus módulos en el formato de Módulos de ECMAScript (Flattened ECMAScript Modules, o FESM por sus siglas).

Esto te puede sonar a chino y lo cierto es que nunca te vas a pelear con ello directamente. No obstante, este cambio implica una mejora considerable en el rendimiento de la app ya que facilita las tareas de tree-shaking reduciendo tu bundle de código, y agilizando la compilación y carga en el navegador.

OFERTA
Curso

Componentes Angular Nivel PRO

Domina los componentes de Angular (Angular 2/4/5+) como un experto y crea componentes técnicamente brillantes.
Idioma: Español
23 €110 €

Roadmap previsto de Angular

En el proyecto en Github de Angular hay una planificación prevista para las próximas releases, tanto a corto como a medio plazo.

Angular plantea una Major Release cada 6 meses, con un alto nivel de compatibilidad con la versión anterior.

Si le das un vistazo, verás que el 22 de Marzo de 2017 es la fecha en la que tenían previsto publicar la versión estable de Angular v4.0.0, que debería ser equivalente (salvo las mejoras introducidas) a la versión 2.4.12.

Además, puedes ver también como plantean una Major Release cada 6 meses, con un alto nivel de compatibilidad con la versión anterior.

De este modo añadirán nuevas características a Angular no condicionadas al legacy de código, pero a la vez garantizan que la migración de una versión a la siguiente sea un proceso tan simple que la mayoría de desarrolladores lo aceptarán sin problemas.

Conclusiones

Espero que esto te haya servidor para perder el miedo a Angular 4 y tener más claro, de ahora en adelante, como funciona la nomenclatura de Angular que se adoptó en 2016.

Personalmente, creo que el paso a SEMVER es para bien, por que ayuda a los desarrolladores a entender en qué medida puede afectar a su código una actualización. Además, demuestra el interés que tienen Google y la comunidad Angular en convertir esta plataforma en un proyecto sostenible a largo plazo.

Gracias por leer esto y si te ha gustado… ¡recuerda compartirlo! 🙂

Published inAngular 2ES6Ionic 2TypeScript

18 Comments

  1. Fran Fran

    Gracias por el post!

  2. Gracias gracias gracias!. Me estaba preguntando esto hace varios días! Y acá encontré un clara explicación. Gracias

    • Enrique Oriol Enrique Oriol

      ¡De nada!

  3. Enrique recibe un cordial saludo. Desde ayer me he leido tu blog sobretodo para la parte de Angular y una de las dudas que tenia es precisamente que impacto tendría Angular Ver. 4. Excelente artículo todo muy bien explicado y sin complicaciones… Gracias! Espero que hagas mas articulos relacionados con Angular. No se si tienes pensado hacer algo con respecto al CLI o ignoro si ya lo tienes. Un saludo desde Venezuela amigo

      • Enrique Oriol Enrique Oriol

        😉

  4. Enrique Enrique

    Cuando sale ionic 4, es decir el ionic que aproveche las mejoras de angular 4

    • Enrique Oriol Enrique Oriol

      Hola,

      Imagino que la transición se hará de forma transparente, pero no se cuando. Quizá incluso ni lo llaman Ionic 4, ya que el único breaking change está relacionado con el módulo de animaciones y es 1 línea. Cambios más grandes han hecho hace 4 días con Ionic Native y no le han cambiado el nombre a Ionic 2.

      ¡Saludos!

  5. Hola Enrique, espero estes muy bien, la verdad apenas estoy comenzando con el mundo de Angular, y vaya sorpresa me lleve cuando leyendo me di cuenta de que hace nada se habia lanzado «Angular 4», y yo aun sin haber tocado ni los conceptos basicos del «2», con tu articulo me quedo claro de que las diferencias son minimas, pero igualmente me surge una duda,¿Pierdo mi dinero si compro un curso de «Angular 2»?, esto es debido a que encontre un curso muy completo del «2», pero del «4» la verdad veo que falta mucho mas contenido.

    espero estes muy bien, un abrazo.

    • Enrique Oriol Enrique Oriol

      No, no pierdes tu dinero, como te digo los cambios son mínimos.

      ¡Saludos!

  6. Joaquin Molina Joaquin Molina

    Buenas, tardes segun tu comentario y otros adicionales, en otros sitios pareciera muy sencillo ir de una version a la 4 o simplemente asumir la version 4. He usado creo que todos los tutoriales repetido cada uno de los pasos, las versiones 6,7 y 8 de node y me ha sido imposible instalar el cliente angular con npm o yarn. Las inconsistencias que me aparecen y lo nuevos consejos son repetitivos para solucionar el problema desintalar el cleinte angular, limpiar el cache e instalalr y no funciona. Me parece que debiera existir un repositorio donde este todo el contenido de angular para poderlo bajar y listo. Sin necesidad de npm o yarn. Todo esto lo he hecho sobre windows 10. Gracias y disculpe mi comentario

    • Enrique Oriol Enrique Oriol

      Pues igual el problema lo vas a tener con Windows… Habría que ver que error es el que tienes que te impide instalar Angular. Seguro que en stackoverflow encuentras la solución.

      En todo caso, instalar la cli de Angular es una instrucción de npm, lo mismo que ionic, react, ember, webpack y otras herramientas de frontend.

      Se podría decir que usar npm o yarn es un estandard de desarrollo JS hoy en día, y ha simplificado mucho las cosas. Y no es el único lenguaje que utiliza gestores de paquetes, si se han popularizado es justamente por que agilizan el desarrollo y la instalación de dependencias.

      Un saludo

  7. Ludwig Ludwig

    Great article! Thank you. sooo I can say that all modules that work on Angular 2 will work perfectly or almost in Angular 4 right?

  8. Luis Eduardo Beltran Luis Eduardo Beltran

    Excelente Articulo, me clarifico ciertas dudas que tenia referente a la versión 4 de angular.

  9. johana johana

    Buenas tardes me podrias ayudar con esto me quede muy complicado estoy aprendiendo nose como se hace esto y me explica x fa

    de las siguentes

    Crear una app en angular 4 que consuma un servicio a través de la siguiente url https://jsonplaceholder.typicode.com/comments, el servicio devolverá una lista en formato JSON similar al siguiente

    [
    {
    «postId»: 1,
    «id»: 1,
    «name»: «id labore ex et quam laborum»,
    «email»: «Eliseo@gardner.biz»,
    «body»: «laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium»
    },
    {
    «postId»: 1,
    «id»: 2,
    «name»: «quo vero reiciendis velit similique earum»,
    «email»: «Jayne_Kuhic@sydney.com»,
    «body»: «est natus enim nihil est dolore omnis voluptatem numquam\net omnis occaecati quod ullam at\nvoluptatem error expedita pariatur\nnihil sint nostrum voluptatem reiciendis et»
    }
    ]
    Dicho json debe ser recorrido y alcenado en un arreglo y mostrado en una tabla la cual debe tener filtrado por id y paginacion.
    Adicionalmente la tabla debe poseer un boton crear el cual al ser clickeado debe mostrar un formulario con los siguientes campos:
    postId solo numeros
    id solo numeros obligatorio
    name alfanumérico obligatorio
    email validar correo obligatorio
    body alfanumérico obligatorio

    Una vez completado todos los campos obligatoriamente se debe agregar al arreglo y mostrarse en la tabla.

Deja un comentario