En este video te muestro como actualizar tu proyecto de Angular 16 o anterior a la nueva versión de Angular, Angular 17.

El proyecto que vamos a usar de referencia es el que hicimos en curso de Angular 16    • Curso Frontend: Aplicaciones web con ...  

Vamos a actualizar no sólo las librerías, sino que vamos a actualizar también nuestro código para que no incluya más módulos o ngModules.
Vamos a actualizar nuestros templates html para usar las nuevas versiones del ngFor y ngIf, los @for y @if.
Por si todo esto fuera poco, vamos a ver la nueva manera de hacer lazy loading para tener proyectos más livianos, usando @defer @placeholder y @loading, tres de las nuevas herramientas de Angular.

En resumen lo que hice fue:
1 - Actualizar mi entorno de desarrollo (node a 18 y @angular/cli global)
2 - Revisar dependencias del proyecto
3 - Actualizar los archivos del proyecto (ng update @angular/cli @angular/core)
4 - Crear un proyecto vacío para copiarme algunos archivos (main.ts, app.config.ts, app.routes.ts)
5 - Configurar app.component para que sea standalone
6 - Configurar el resto de los componentes para que sean standalones
7 - Actualizar las importaciones que se solían hacer en módulos y ahora se hacen en componentes.
8 - Actualizo la sintaxis de las directivas ngIf y ngFor (ng g @angular/core:control-flow)
9 - Difiero la carga de componentes pesados

Guía de actualización oficial de Angular: https://update.angular.io/?l=3&v=16.0...

Timestamps:
00:00 - ¿Que vamos a hacer?
00:39 - Verificar si podemos actualizar
05:04 - Actualización de librerías
06:27 - Eliminación de ngModules
12:17 - Actualización de sintaxis ngIf y ngFor
16:35 - Defer (lazy loading en Angular 17)
25:34 - Gracias