Summary
Full Transcript
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 https://www.youtube.com/playlist?list=PL3Qv7aeTNq0eChWdLTbxelz-5d6ZTBp3i 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-17.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
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
