# El cambio declarativo de Angular **URL:** \ **Category:** Community\ **Tags:** angular, desarrollo\ **Created:** [19 Octubre, 2025 18:14 UTC](https://www.yodev.dev/t/el-cambio-declarativo-de-angular/638 "2025-10-19T18:14:35Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Mark](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/mark/32/574_2.png) [@Mark](https://www.yodev.dev/u/Mark)\ **Post date:** [19 Octubre, 2025 18:14 UTC](https://www.yodev.dev/t/el-cambio-declarativo-de-angular/638/1 "2025-10-19T18:14:36Z")
[![Cover image for El cambio declarativo de Angular](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/cb26eca46275b7b983b8f480169f661110f1069e.webp)](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo1sac5fk5if308sndkmj.jpg) [![Angular Firebase profile image](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/918687a4451b23110236a81c125dfd8d7480b3da.webp)](https://dev.to/angularfirebase)[![Antonio Cardenas](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/9f3924c890be1b9254342df3f33cb0ece94e836f.webp)](https://dev.to/antoniocardenas) [Antonio Cardenas](https://dev.to/antoniocardenas)for [Angular Firebase](https://dev.to/angularfirebase) Posted on Oct 19 ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/28c37bb03a337f8fac0b4936d1e1d57bd13b7f12.svg)1 ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/5429a9458dcc6060b5d59bd0465cbcb64895d0dd.svg)1 ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/6698c156eea9d4f7dae2d4c13c15668132365d59.svg)1 ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/9885e2c977d4bc4a8da42a23249de9388ff7f0fb.svg)1 ![](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/1X/f4a700d6408e853bbc9db59b9e3f8c1c9e90f03e.svg)1 # El cambio declarativo de Angular [#angular](https://dev.to/t/angular)[#typescript](https://dev.to/t/typescript)[#webdev](https://dev.to/t/webdev)[#spanish](https://dev.to/t/spanish) ## Cómo la Nueva Estructura de Carpetas lo Cambia Todo Si no has actualizado a la versión 20, la primera y segunda parte de esta guía te pueden ayudar a comprender qué cambia y actualizar. **Parte 1: La actualización en Sí Misma 🛠** Primero, resolvamos lo básico. Antes de ejecutar cualquier comando, asegúrate de que tu entorno esté listo. **Prerrequisitos** - **Node.js** : v20.11.1 o posterior. - **TypeScript** : v5.8 o posterior. - \*\*Copia de seguridad del proyecto: Asegúrate de confirmar todos tus cambios actuales en Git. En serio. **El Comando de Actualización** Una vez que hayas confirmado tu versión de Node.js, ejecuta el comando que se ajuste a tu proyecto. Para un proyecto estándar de Angular: ```auto ng update @angular/cli @angular/core ``` Si utilizas Angular Material: ```auto ng update @angular/cli @angular/core @angular/material ``` El proceso de actualización se ejecutará, pero es probable que te encuentres con tu primer obstáculo de inmediato. **Parte 2: Lo que se rompe inmediatamente 🛑** A diferencia de las actualizaciones anteriores, Angular 20 introduce un cambio significativo que detendrá tu compilación. **1. La Historia Completa Detrás de la Eliminación de Karma** Lo primero que notarás es que `ng test` fallará. Esto no es solo un error; es un cambio fundamental en las herramientas de compilación de Angular. Con Angular 20, el paquete de compilación predeterminado cambia de `@angular-devkit/build-angular` al nuevo `@angular/build`. Este nuevo paquete **no incluye Karma**. El ecosistema web ha avanzado hacia ejecutores de pruebas más rápidos y modernos como **Vitest** y **Jest** , y Karma se había convertido en un cuello de botella. **La solución temporal:** Para que tus pruebas se ejecuten sin migrar todo hoy, debes reinstalar manualmente la antigua herramienta de compilación. Esto obliga a la CLI a usar el antiguo compilador que aún es compatible con Karma. ```auto npm install @angular-devkit/build-angular --save-dev ``` Este es un puente de compatibilidad. El mensaje del equipo de Angular es claro: comienza a planificar tu migración a Jest o Vitest pronto. **2. browserslist y soporte de Navegadores** Aquí hay un detalle menor que podría sorprenderte. Angular 20 **oficialmente ya no es compatible con Opera**. Si tienes “Opera” listado en tu archivo `.browserslistrc`, tu compilación puede fallar o arrojar advertencias. Quítalo para resolver el problema. **Parte 3: La Nueva Arquitectura 🏛** Más allá de los cambios importantes, Angular 20 impulsa una arquitectura más moderna, explícita y escalable. **1. Componentes standalone por defecto.** Los nuevos proyectos generados con `ng new` ahora son _standalone_ (independientes) por defecto. Esto marca un cambio arquitectónico fundamental que se aleja de los NgModules. Al listar las dependencias directamente en el _array_ `imports` de un componente, cada componente se vuelve autocontenido. ¿Qué implica este cambio?: - **Arquitectura más clara y definida** : Sabes exactamente lo que necesita cada componente. - **Mejora el _tree-shaking_** : Conduce a paquetes más pequeños y optimizados. Para migrar tus proyectos existentes, puedes ejecutar el _schematic_ de migración _standalone_: ```auto ng generate @angular/core:standalone ``` **2. Una estructura de carpetas que cuenta una historia** Una buena estructura de carpetas no solo contiene archivos, sino que te dice lo que hace la aplicación. Vale la pena hacer énfasis en la guía de estilo oficial de Angular, ya que sus recomendaciones se basan en años de experiencia comunitaria. Esta filosofía, detallada en su [página de referencia de estructura de archivos](https://angular.dev/reference/configs/file-structure), a menudo se resume con el acrónimo **LIFT** (por sus siglas en inglés: Localizar, Identificar, Plano, Tratar de ser DRY): - **L** ocate (Localiza) tu código fácilmente. - **I** dentify (Identifica) lo que hace un archivo de un vistazo. - **F** lat Flat (Plano): Mantén estructura plana tanto como puedas. - **T** ry to be DRY: Don’t Repeat Yourself (Trata de no repetirte). La conclusión principal es **organizar por característica, no por tipo**. En lugar de una carpeta `components` y una carpeta `services`, crea carpetas para características como `user-profile` o `product-list`. Usemos un ejemplo práctico para una aplicación de comercio electrónico: ```auto src/app/ ├── core/ │ ├── auth/ # Lógica de autenticación usada en todas partes │ │ ├── auth-store.ts │ │ └── auth-interceptor.ts │ └── layout/ # El shell de la aplicación: barra de navegación, pie de página │ ├── navbar.ts │ └── footer.ts │ ├── features/ │ ├── products/ # Todo para navegar por los productos │ │ ├── product-list.ts │ │ ├── product-details.ts │ │ └── product-search.ts │ │ │ └── cart/ # La característica del carrito de compras │ ├── cart-store.ts │ ├── cart-view.ts │ └── add-to-cart.ts │ └── shared/ # Componentes "tontos" reutilizables y utilidades └── ui/ ├── button.ts ├── spinner.ts └── price.pipe.ts ``` **¿Por qué funciona esto?** 1. **core 🏛 (Proporcionar una vez):** Servicios y componentes que la aplicación necesita para ejecutarse, cargados solo una vez (`AuthStore`, `Navbar`). 2. **Features ✨ (Lo que hace tu aplicación):** El corazón de tu aplicación. Cada carpeta es una característica autocontenida. 3. **shared ♻ (Bloques de construcción reutilizables):** Componentes “tontos”, _pipes_ y directivas que no saben nada sobre las características en las que se utilizan (`Button`, `Spinner`). Son importados por los módulos de características. **3. La Nueva Convención de Nombres** Angular 20 introduce una nueva convención oficial de nombres que **elimina los sufijos tradicionales** como `.component.ts` o `.service.ts`. | **Nomenclatura Antigua** | **Nueva Nomenclatura** | **Intención** | | --- | --- | --- | | user-profile.component.ts | user-profile.ts | Componente de Interfaz de Usuario | | auth.service.ts | auth-store.ts | Gestión de estado | | highlight.directive.ts | highlight.ts | Directiva | | user-api.service.ts | user-api.ts | Cliente HTTP | El objetivo es centrarse en la **intención** del archivo en lugar de su tipo técnico. Una clase que maneja el estado es un “store” (almacén), y una que realiza peticiones HTTP es una “api”. Esto hace que el propósito de tu código sea mucho más claro, especialmente en una estructura de carpetas basada en características. **Parte 4: Las nuevas herramientas y sintaxis 🚀** Finalmente, veamos las nuevas herramientas que mejorarán tu desarrollo diario. **1. El flujo de control es más que syntactic sugar (azúcar sintáctico).** El nuevo bloque `@for` reemplaza a `*ngFor` y es una mejora importante. **Sintaxis antigua:** ```auto
{{ item.name }}
``` **Nueva sintaxis:** ```auto @for (item of items; track item.id) {
{{ item.name }}
} @empty {
No hay elementos para mostrar.
} ``` Mejoras clave: - `track` es **obligatorio** , lo que impone una mejor práctica de rendimiento que a menudo se olvidaba. - El bloque `@empty` incorporado limpia las plantillas al eliminar la necesidad de un `*ngIf` separado. Puedes usar la CLI para refactorizar automáticamente tus plantillas: ```auto ng generate @angular/core:control-flow ``` **2. Zoneless: Escapando de la “magia de la detección de cambios”.** Aunque todavía es experimental, el camino hacia un Angular sin zonas (_zoneless_) se está volviendo más claro. En un mundo sin zonas, la interfaz de usuario solo se actualiza cuando se lo indicas explícitamente. Los **signals** (señales) son la herramienta principal para esto. ```auto mySignal.set(newValue); ``` Esta línea le indica directamente a Angular que actualice solo las partes específicas del DOM que dependen de esa señal. Es un enfoque quirúrgico, predecible y de alto rendimiento que elimina la sobrecarga y la imprevisibilidad de Zone.js. **Conclusión** Angular 20 es una versión significativa. La actualización requiere intervención manual para las pruebas, pero impulsa el _framework_ hacia un futuro más moderno, explícito y de alto rendimiento. Al adoptar componentes _standalone_, una arquitectura basada en características y el nuevo flujo de control, no solo estás actualizando, sino que estás preparando tu aplicación para la próxima era del desarrollo web.