El ZIP adjunto a este link contiene el proyecto con Angular 14.
El proyecto me corre normal, sin errores, algunos errores que ocurren (por ejemplo, al agregar un producto) también me ocurrieron con el proyecto original.
Nunca había migrado un proyecto de Angular. A parte de actualizar las librerías, también tuve que modificar la forma de realizar unas importaciones de Firebase.
Vamos a ver si la migración que logré hacer funciona bien a lo largo de todo el curso.
Conoce la importancia de los formularios para tu sitio web
Formularios en Angular: Creación y Manejo Efectivo
Formularios Reactivos en Angular: Creación y Optimización
Implementación de Formularios Reactivos en Proyectos Angular
Novedades y Migración en Angular 10 para Desarrolladores
Primeros pasos con Angular Forms
Ventajas de los Formularios Reactivos en Angular
For Control en Formularios Reactivos: Creación y Uso Básico
Tipos de Input en HTML y su Impacto en la Experiencia de Usuario
Uso de Selects y Selectores Múltiples en Formularios HTML
Implementación de Inputs Radio y Checkbox en Formularios HTML
Validaciones en Formularios con Angular: Sincronización y Estados
Integración de CSS Dinámico en Formularios Reactivos con Angular
Descubre todas las validaciones de Angular Forms
Manejo de formularios reactivos con FormGroup en Angular
Creación de Formularios Reactivos con FormBuilder en Angular
Validaciones en Angular: 11 Métodos y Expresiones Regulares
Manejo de FormGroups Anidados en Formularios Angular
Implementación de Formularios con Angular Material
Errores Comunes en Formularios Angular Material
Validaciones Personalizadas de Contraseñas en Angular
Implemeta validaciones avanzadas en PlatziStore
Validaciones Grupales en Formularios Reactivos de Angular
Validaciones Condicionadas en Formularios Reactivos
Gestión de Categorías en Angular: Creación y Edición de Formularios
Conexión de una API REST con Angular y Postman
Subir Imágenes a FiberStorage con Angular y HTML
Validaciones Asíncronas con API para Formularios de Categorías
Edición de Categorías con Patch Value en Angular
Editar y Crear Categorías con un Solo Formulario
Construye formularios dinámicos conectando una API
Patrón Smart y DOM Components en Formularios Angular
Modificación de Inputs en Angular con Setters y Ciclo de Vida
"Mejoras en Formularios y Validaciones de Productos"
Select dinámico con Angular y API de categorías
Select dinámico con objetos en Angular y Angular Material
Creación de Formularios Dinámicos con Reactive Forms en Angular
Estrategias avanzadas y optimización de formularios
Conexión de Componentes Propios a Reactive Forms en Angular
Optimización de búsquedas con NGRX y HTTP en Angular
Optimización de Búsquedas con Debounce Time en Angular
Fundamentos de Accesibilidad Web para Desarrolladores
Rendimiento y Optimización en Aplicaciones Angular
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Novedades y Migración en Angular 10 para Desarrolladores
4/37Recursos
¿Qué novedades trae la versión 10 de Angular?
Angular se renueva cada seis meses, ofreciendo mejoras significativas sin introducir breaking changes. Esto significa que con cada nueva versión, no hay rupturas que preocupen a los desarrolladores. En el momento actual, estamos en la versión 10. Si trabajas con versiones 7, 8 o 9, la migración es sencilla y se puede realizar usando el comando ng update.
¿Cuáles son las mejoras más destacadas?
-
Date Range Picker en Angular Material: Una de las funcionalidades más solicitadas para Angular Material, permitiendo a los desarrolladores seleccionar rangos de fechas sin necesidad de múltiples inputs.
-
Advertencias sobre CommonJS: Angular ahora lanza alertas si se utiliza una librería con estándares antiguos de JavaScript, ayudando a los desarrolladores a mantenerse actualizados y considerar alternativas más modernas.
-
Opción de strict mode: Esta funcionalidad opcional fortalece el tipado en TypeScript, impidiendo a los desarrolladores utilizar el tipo
anysin definir adecuadamente los tipos, algo que algunas empresas buscan para mejorar la calidad de su código. -
Actualizaciones del ecosistema: Mejora en las dependencias como TSLink y TypeScript, adaptándose a las versiones más actuales y estándares de la industria.
-
Configuración de navegadores por defecto: La nueva configuración por defecto excluye el soporte para navegadores antiguos como Internet Explorer, enfocándose en navegadores modernos. Sin embargo, se puede modificar el archivo
browserlistsi se requiere soporte para versiones más antiguas.
¿Cómo realizar la migración de proyectos existentes a Angular 10?
La migración entre versiones de Angular es sencilla gracias a ng update. Para hacer una migración exitosa, sigue estos pasos:
-
Usa la página de actualización de Angular: En update.angular.io, encontrarás las especificaciones para pasar de una versión a otra, con recomendaciones detalladas.
-
Migrar versión por versión: No es recomendable migrar directamente de versiones muy antiguas a la última. Por ejemplo, si estás en Angular 8, primero migra a 9 y luego a 10.
-
Usa Node Version Manager para gestionar versiones de Node: Al ejecutar migraciones, las diferentes versiones de Angular pueden requerir diferentes versiones de Node. Node Version Manager (NVM) facilita la gestión de estas versiones, permitiendo cambiar rápidamente entre versiones sin tener que reinstalar.
¿Cómo usar Node Version Manager?
Aquí te mostramos un ejemplo de cómo puedes cambiar las versiones de Node usando Node Version Manager:
# Cambia a Node versión 12
nvm use 12
# Cambia a Node versión 14
nvm use 14
Este sencillo comando te permite cambiar el entorno de Node según las necesidades específicas de tu proyecto Angular. Así, te aseguras de que la versión de Node sea compatible y eficiente para cada proyecto en particular.
¿Qué hacer si tengo problemas o dudas durante la migración?
Es normal encontrarse con desafíos durante una migración de versión. Si enfrentas alguno o tienes dudas sobre el proceso, es útil consultar comunidades de desarrolladores o foros, como Stack Overflow, donde otros desarrolladores comparten soluciones a problemas comunes. Además, si estás estudiando en Platzi, puedes dejar tus preguntas en la caja de comentarios del curso correspondiente. Esto te brindará el apoyo necesario de expertos o de la comunidad para superar cualquier obstáculo que se presente.
Ánimo, recuerda que mantener tus proyectos al día con las últimas versiones de Angular no solo mejora la funcionalidad sino también la seguridad y el rendimiento de tus aplicaciones. ¡Adelante y mucho éxito en tus proyectos con Angular!
Aportes 19
Preguntas 4
Ordenar por:
No he podido hacer funcionar el repositorio de este curso, ya he leido e hice lo que los demas aconsejan, pero no funciona, y por lo general las preguntas qu se hacen aca , nunca son respondidas, es parecido a youtube que por lo general no responden y estas solo viendo y repitiendo un video para entender e investigando en la web lo que en platzi nunca te responden, estoy decepcionado con esta plataforma, y tanta fama que tiene, esto me hace acordar de las academias de ingles, que los que sabian ingles era porque lo habian aprendido en otra parte y nunca en la institucion.
Listo ya le migre el proyecto que me quede en PWA.
Después de tanto sufrimiento, logre ejecutar el repositorio. Esta solución corresponde a la fecha Abril 13, 2023
- Utilizar Github Desktop para descargar el repositorio.
- Seleccionar la rama init en la que trabajaremos.
- Abrir repositorio en VSC.
- Ejecutar en consola
npm i @angular/compiler-cli@10.0.11
- ejecutar ng serve -o y empezar a trabajar, recuerden que cada año que pasa avanzamos en la versión de nodejs, Angular CLI y Angular Core, así que debemos tener mucho ojo al momento de descargar repositorios, es más fácil trabajar con la versión que se utiliza en los videos que vemos, que actualizar todo, muy tedioso… pero sí o sí debemos aprender a migrar nuestros propios proyectos.
Para quienes quieren correr el proyecto sin necesidad de migrarlo a la ultima versión de Angular cli y node, deben de clonar la rama init del repositorio, luego instalan de forma local la versión de angular que tenga el proyecto y por ultimo usar la versión 14 de node.js, asi serian los pasos:
- Descargar el repo en la grama init
- Ubicarse en consola dentro del proyecto
- Instalar de forma local la version de angular del proyecto:
npm install -D @angular/cli
4)Instalar la herramienta Node Version Manager:
5)Instalar node 14 con la herramienta Node Version Manager
nvm install 14
6)Correr el proyecto
ng serve
Lo intente con la rama init para seguir paso a paso el curso, si desean pueden probar con la rama master
Logre migrar el proyecto a la versión 15 de Angular desde la versión 10, versión por versión. Ahora corro el proyecto y salen demasiados errores 😦
para los que tengan problemas de migrar el proyecto de la versión de 10 a 12 y les salga un error como este:The “@angular-devkit/schematics” package cannot be resolved from the workspace root directory.
primero cambiar la version de npm a la 6 con el siguiente comando npm i -g npm@6, después instalar los paquetes npm i, y ahí seguir los pasos del angular update guide.
eje:npx @angular/cli@11 update @angular/core@11 @angular/cli@11
-no es la mejor guía pero espero les sirva.
toca ir actualizando de version en version, actualmente esta en la v15
Bueno se solucionó mirando un poco más el curso y bajar la version de node.
El archivo .nvmrc guarda que versión de node vamos a usar
lo ideal es mirar la version de node que estamos utilizando y con el comando : node -v
Angular saca versión nueva cada 6 meses, que trae mejoras que pueden generar incompatibilidades entre versiones.
Angular v10 algunas novedades como:
-Data range picket: permite generar rangos entre dos fechas.
-Warniung about common JS, alertas si usas ES viejos
-Optional stricter, trabajar con modo estricto, por ejemplo tipar todo.
-Update dependencies: se actualizaron dependencias
-New default browser config, viene por dafault sin soportar ciertos navegadores (internet explorer) que generan peso a la app.
Para actualizar de una versión a otra se puede utilizar el comando:
ng update
Inicié un proyecto hace 2 años con Angular 8, a hoy Feb/22 Angular va en v14, funciona bien, pero quiero incorporar nuevas librerías que requieren una versión superior… Vamos a actualizar!!! … Que dolor de cabeza, algunas librerías antiguas ya no trabajan con lo nuevo de Angular, muchas cosas han cambiado, hasta AngularFirebase mi backend tiene una nueva versión… Dios 🤯 .
Me estoy planteando hacer un refactor completo 😢.
RECOMENDACIÓN: Copiar toda la carpeta del proyecto y trabajar desde ahí.
MORALEJA : Ir actualizando con frecuencia.
cuando comencé a utilizar node versión manager, me facilito la vida en muchos sentidos
recomiendo usar nvm para manejar varias versiones de angular así cada proyecto tiene sus dependencias
Les comparto los pasos que realice para que me funcione el proyecto, capaz exista una manera mas sencilla, pero con estos pasos pude levantar el proyecto:
*Desinstalar la version de angular que utilizaba de los proyectos anteriores, que es la 12.1.2
*Descarga nvm e instalar la version node 16.14.2
*Instalar la ultima version de angular 10
*Eliminar la carpeta node_modules del proyecto
*Ejecutar el comando npm cache clean --force
*Ejecutar npm install
Espero que les sea de ayuda
cososcocos?
Y es por esto que a muchos developers no les gusta trabajar con Angular …
si tengo la version actualizada de angular 13.1 , cual es la version de amgular del proyecto? y como migraria a la nueva version, intente pero me sale falta Tslint
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?