Como migrar a Angular 17 desde versiones anteriores
Ya has superado la mitad. Estás muy cerca de completar el curso.
Sobre esta lección
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
Sobre este curso
En este curso te enseño todo lo que tenés que saber para crear tu propia aplicación web dinámica usando Angular. Vas a aprender cómo crear un proyecto, vamos a hablar de los bloques de construcción de Angular: Componentes y módulos. También vamos a usar Angular Router para crear rutas dinámicas, código reutilizable y de bajo mantenimiento. Como nos basamos en Angular significa que también vamos a aprender a usar typescript como lenguaje de programación y vamos a apalancarnos de algunas otras tecnologías como SASS. Si estás listo para pasar al próximo nivel de desarrollo front end, te espero! Si querés ver como queda el proyecto terminado entrá acá: https://pedir-comida-puntojson.netlify.app/ (Se ve bien únicamente en teléfonos, que es lo que el alcance de este curso llegó a hacer).
Lo que aprenderás en este curso:
- Comprender la arquitectura de módulos y componentes de Angular
- Crear servicios, directivas y pipes personalizados
- Implementar formularios reactivos y validaciones
- Gestionar el enrutamiento y la navegación en Angular