Conoce la importancia de los formularios para tu sitio web

1

Formularios en Angular: Creación y Manejo Efectivo

2

Formularios Reactivos en Angular: Creación y Optimización

3

Implementación de Formularios Reactivos en Proyectos Angular

4

Novedades y Migración en Angular 10 para Desarrolladores

Primeros pasos con Angular Forms

5

Ventajas de los Formularios Reactivos en Angular

6

For Control en Formularios Reactivos: Creación y Uso Básico

7

Tipos de Input en HTML y su Impacto en la Experiencia de Usuario

8

Uso de Selects y Selectores Múltiples en Formularios HTML

9

Implementación de Inputs Radio y Checkbox en Formularios HTML

10

Validaciones en Formularios con Angular: Sincronización y Estados

11

Integración de CSS Dinámico en Formularios Reactivos con Angular

Descubre todas las validaciones de Angular Forms

12

Manejo de formularios reactivos con FormGroup en Angular

13

Creación de Formularios Reactivos con FormBuilder en Angular

14

Validaciones en Angular: 11 Métodos y Expresiones Regulares

15

Manejo de FormGroups Anidados en Formularios Angular

16

Implementación de Formularios con Angular Material

17

Errores Comunes en Formularios Angular Material

18

Validaciones Personalizadas de Contraseñas en Angular

Implemeta validaciones avanzadas en PlatziStore

19

Validaciones Grupales en Formularios Reactivos de Angular

20

Validaciones Condicionadas en Formularios Reactivos

21

Gestión de Categorías en Angular: Creación y Edición de Formularios

22

Conexión de una API REST con Angular y Postman

23

Subir Imágenes a FiberStorage con Angular y HTML

24

Validaciones Asíncronas con API para Formularios de Categorías

25

Edición de Categorías con Patch Value en Angular

26

Editar y Crear Categorías con un Solo Formulario

Construye formularios dinámicos conectando una API

27

Patrón Smart y DOM Components en Formularios Angular

28

Modificación de Inputs en Angular con Setters y Ciclo de Vida

29

"Mejoras en Formularios y Validaciones de Productos"

30

Select dinámico con Angular y API de categorías

31

Select dinámico con objetos en Angular y Angular Material

32

Creación de Formularios Dinámicos con Reactive Forms en Angular

Estrategias avanzadas y optimización de formularios

33

Conexión de Componentes Propios a Reactive Forms en Angular

34

Optimización de búsquedas con NGRX y HTTP en Angular

35

Optimización de Búsquedas con Debounce Time en Angular

36

Fundamentos de Accesibilidad Web para Desarrolladores

37

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/37
Recursos

¿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?

  1. 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.

  2. 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.

  3. Opción de strict mode: Esta funcionalidad opcional fortalece el tipado en TypeScript, impidiendo a los desarrolladores utilizar el tipo any sin definir adecuadamente los tipos, algo que algunas empresas buscan para mejorar la calidad de su código.

  4. 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.

  5. 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 browserlist si 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:

  1. 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.

  2. 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.

  3. 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:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

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

  1. Utilizar Github Desktop para descargar el repositorio.
  2. Seleccionar la rama init en la que trabajaremos.
  3. Abrir repositorio en VSC.
  4. Ejecutar en consola
npm i @angular/compiler-cli@10.0.11
  1. 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:

  1. Descargar el repo en la grama init
  2. Ubicarse en consola dentro del proyecto
  3. Instalar de forma local la version de angular del proyecto:
npm install -D @angular/cli

4)Instalar la herramienta Node Version Manager:

Repositorio de 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