ANGULAR

En esta categoría comparto una selección de utilidades web que utilizo en mi día a día y que me han dado excelentes resultados. Entiendo el hecho de «mostrar tu web» como una ventana abierta para compartir información con el mundo y aportar soluciones reales.

Además, analizo qué elementos de la estructura web son clave hoy en día para apalancar el posicionamiento, logrando que tu contenido sea fácilmente indexado tanto por búsquedas humanas como por los nuevos motores de IA para sus referencias y opiniones.

+

ROADMAP ANGULAR

Si quieres aprender Angular en 2026, este es el orden que te recomiendo: fundamentos web, TypeScript, el Angular moderno (standalone + Signals) y, al final, el ecosistema y los proyectos de portafolio. Cada tema trae enlaces a la documentación oficial o a recursos gratuitos para que no pierdas tiempo buscando.

ANTES DE EMPEZAR: QUÉ CAMBIÓ EN ANGULAR

Muchos roadmaps que circulan en internet están desactualizados. La versión actual es Angular 22, lanzada en junio de 2026, y trae cambios de fondo:

Standalone por defecto. Los NgModules ya no son el punto de partida.
Zoneless por defecto desde Angular 21: los proyectos nuevos se generan sin Zone.js.
OnPush por defecto desde Angular 22.
Signals en el centro: Signal Forms, la API de Resource y Angular Aria ya son estables.
Control flow nativo: commat;if , commat;for y commat;switch reemplazan a *ngIf y *ngFor .
Vitest reemplaza a Karma como runner de pruebas por defecto.

En cada fase marco qué es lo moderno y qué es legado. El legado lo vas a encontrar en proyectos existentes, así que vale la pena entenderlo, pero no empieces por ahí.

Cómo usar este roadmap: avanza en orden y construye algo pequeño al terminar cada fase. Si ya dominas una fase, haz un repaso rápido y sigue.

Fuentes:

1

Fundamentos web

Angular se construye sobre HTML, CSS y JavaScript. Si fallas aquí, todo lo demás cuesta el doble.

HTML

Estructura del DOM, etiquetas semánticas, formularios y multimedia.
Accesibilidad: atributos ARIA, «», orden de foco.

CSS

Selectores, box model, Flexbox y Grid.
Diseño responsive con media queries.
Variables CSS, transiciones y animaciones.

JavaScript moderno (ES6+)

let, const, arrow functions y this.
Arrays, objetos y métodos funcionales (map, filter, reduce).
Promesas y async / await.
DOM, eventos y Fetch API.

Fuentes:

2

TypeScript

Todo Angular está escrito en TypeScript, así que esta fase no se salta.

Conceptos esenciales

Tipos primitivos, personalizados e inferencia de tipos.
Interfaces, clases y genéricos.
Union e intersection types.
Utility types: Partial, Pick, Omit, Record, Readonly.
Módulos ( import / export ).

Buenas prácticas

Tipos primitivos, personalizados e inferencia de tipos.
Interfaces, clases y genéricos.
Union e intersection types.
Utility types: Partial, Pick, Omit, Record, Readonly.
Módulos ( import / export ).

Nota: los namespaces ya casi no se usan en código moderno. Los decoradores ( commat;Component, commat;Injectable ) los aprenderás usando Angular; no hace falta estudiarlos a fondo aparte.

Recursos

3

Angular Core (la forma moderna)

Aquí aprendes Angular como se escribe hoy: componentes standalone, Signals y control flow nativo desde el primer día.

Instalación y entorno

Node.js (versión LTS) y npm.
Angular CLI: ng new, ng serve, ng generate, ng build.
Estructura de carpetas de un proyecto nuevo.

Componentes standalone

Creación de componentes sin NgModule.
Inputs y outputs basados en signals: input(), output() y model().
Inyección con inject().
Ciclo de vida (ngOnInit, ngOnDestroy, afterNextRender).

Templates y control flow

@if, @for (con track, que reemplaza a trackBy) y @switch.
@let para variables en el template.
@defer para cargar partes de la vista bajo demanda.

Signals

signal(), computed() y effect().
linkedSignal() para estado derivado que también se puede escribir.
resource() y httpResource() para datos asíncronos.

Servicios e inyección de dependencias

@njectable({ providedIn: 'root' }) y inject().
Alcance de los providers: aplicación, ruta y componente.
Uso práctico con APIs y lógica de negocio.

Formularios

Reactive Forms ( FormGroup, FormControl, FormBuilder): los más comunes en empresas.
Template-driven forms (ngModel) para formularios sencillos.
Validaciones personalizadas y asíncronas, formularios dinámicos.

Pipes y directivas

Pipes integrados y personalizados; pipes puros e impuros.
Enlace de class y style.
Directivas de atributo personalizadas (@Directive).

Recursos

4

Angular avanzado

Esta fase es para entender cómo funciona Angular por dentro y sacarle rendimiento.

Change detection y zoneless

Cómo detecta Angular los cambios sin Zone.js.
Por qué la combinación OnPush + Signals es ahora el modelo por defecto.
ChangeDetectorRef y cuándo todavía lo necesitas.

Comunicación avanzada entre componentes

Queries con signals: viewChild(), viewChildren(), contentChild().
Servicios con signals como mediadores de estado compartido.

SSR e hidratación

Server-Side Rendering con @angular/ssr (antes se llamaba Angular Universal).
Prerenderizado (SSG) de rutas estáticas.
Hidratación incremental combinada con @defer.

Animaciones y View Transitions

Animaciones de entrada y salida con CSS nativo.
Transiciones entre rutas con withViewTransitions() en el router.

Legado: para leer código existente

No empieces por aquí, pero apréndelo para trabajar en proyectos antiguos:

NgModules y AppModule.
*ngIf , *ngFor , ngClass y ngStyle.
@Input , @Output y EventEmitter con decoradores.
Zone.js y la estrategia de detección Default.

Recursos

5

Ecosistema Angular

Con el núcleo dominado, toca aprender las herramientas que usan los equipos profesionales.

RxJS

Observables y operadores: map, switchMap, mergeMap, concatMap.
Subjects: Subject, BehaviorSubject, ReplaySubject.
Cancelación de suscripciones con takeUntilDestroyed().
Puente con Signals: y toObservable().

Gestión de estado

Empieza con servicios + signals; alcanza para la mayoría de apps.
NgRx Signal Store para estado más complejo.
NgRx Store clásico (Actions, Reducers, Effects, Selectors, Entity) para entender proyectos grandes.
Redux DevTools para depurar.

Testing

Pruebas unitarias con Vitest, el runner por defecto; Karma y Jasmine quedan como legado.
Pruebas de componentes y servicios.
Pruebas end-to-end con Playwright o Cypress.

Arquitectura

Organización de carpetas por feature.
Componentes smart (con lógica) y dumb (de presentación).
Principios SOLID aplicados a Angular.

Recursos

6

Integraciones y herramientas profesionales

Esta fase conecta tu app con el mundo real: APIs, librerías de UI y despliegue.

APIs y backend

HttpClient , interceptores funcionales y manejo de errores.
Autenticación con JWT, OAuth y refresh tokens.
Guards por rol.
Comunicación en tiempo real con WebSockets.

UI/UX y librerías

Angular Material, la librería oficial de componentes.
PrimeNG y Tailwind CSS con Angular.
Spartan, la alternativa tipo shadcn para Angular.
Temas oscuros, accesibilidad e internacionalización.

DevOps y despliegue

Build de producción con ng build.
Dockerización de la app.
Despliegue en Vercel, Firebase, Netlify o AWS.
CI/CD con GitHub Actions.

Recursos

7

Buenas prácticas y rendimiento

Una app que funciona no es lo mismo que una app rápida. Estos son los puntos a revisar:

@defer y lazy loading de rutas.
Estrategias de precarga (preload strategies).
Análisis del tamaño del bundle.
track en cada @for.
Signals + OnPush en toda la app.
Caché de peticiones a la API.
Auditoría con Lighthouse y perfilado con Angular DevTools.

Recursos

8

Proyectos para tu portafolio

Lo que aprendes sin practicar se olvida. Estos proyectos cubren todo el roadmap y sirven para mostrar en entrevistas:

CRUD completo con formularios (Reactive o Signal Forms) y una API REST.
Dashboard con gráficos usando ng2-charts o ApexCharts.
Autenticación con JWT y roles.
Aplicación PWA que funcione sin conexión (service workers).
App con SSR e hidratación incremental; un blog es un excelente ejemplo.
App con NgRx Signal Store.
App 100 % moderna: zoneless, Signals y control flow.
Despliegue automático con CI/CD en Vercel, Firebase o AWS.

Recursos

9

Mantente al día

Angular publica una versión mayor aproximadamente cada seis meses, y cada versión tiene 18 meses de soporte. Revisa estas fuentes cada semestre:

Fuentes