Angular 22: Zoneless Estable y Signals por Doquier - Todas las Novedades

Angular 22 llega para marcar el punto culminante de la revolución reactiva que comenzó hace varias versiones. Con la estabilización definitiva de Zoneless como configuración por defecto y la integración completa de Signals en todo el ecosistema (incluyendo Forms y Router), Angular 22 ofrece la experiencia de desarrollo más rápida y limpia de su historia.

El Fin de Zone.js: Zoneless Estable

Zoneless por Defecto

Después de un periodo en Developer Preview, Angular 22 da el gran paso: todos los nuevos proyectos creados con ng new son Zoneless por defecto. Zone.js es ahora una dependencia opt-in solo recomendada para proyectos legacy.

// main.ts - En Angular 22, bootstrapApplication es Zoneless nativamente
import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app.component";

// Ya no es necesario proveer provideExperimentalZonelessChangeDetection()
// Zoneless es el comportamiento predeterminado
bootstrapApplication(AppComponent, {
  providers: [
    // Providers habituales...
  ],
});

Detección de Cambios Quirúrgica

Sin Zone.js, Angular sabe exactamente qué componente ha cambiado gracias al grafo de Signals, eliminando las comprobaciones de árbol descendente.

@Component({
  selector: "app-user-profile",
  // ChangeDetectionStrategy.OnPush es redundante en Zoneless puro,
  // pero se mantiene para retrocompatibilidad
  template: `
    <div class="card">
      <h2>{{ name() }}</h2>
      <button (click)="updateName()">Cambiar Nombre</button>
    </div>
  `,
})
export class UserProfileComponent {
  name = signal("Desarrollador Angular");

  updateName() {
    // Esto dispara la actualización solo en la vista de este componente
    this.name.set("Ninja Angular 22");
  }
}

Signal Forms: La Evolución de Reactive Forms

Adiós al Boilerplate

Una de las peticiones más históricas de la comunidad finalmente llega: formularios puramente basados en Signals que son estrictamente tipados y sincrónicos.

import { Component } from "@angular/core";
import {
  SignalFormGroup,
  SignalFormControl,
  Validators,
} from "@angular/forms/signals";

@Component({
  selector: "app-login",
  template: `
    <form [signalForm]="loginForm" (ngSubmit)="onSubmit()">
      <input formControlName="email" type="email" />
      @if (email.errors().email) {
        <span>Email inválido</span>
      }

      <input formControlName="password" type="password" />

      <!-- Reactividad síncrona pura -->
      <button [disabled]="loginForm.invalid()">Entrar</button>
    </form>
  `,
})
export class LoginComponent {
  // Nueva API de Signal Forms
  loginForm = new SignalFormGroup({
    email: new SignalFormControl("", [Validators.required, Validators.email]),
    password: new SignalFormControl("", [
      Validators.required,
      Validators.minLength(8),
    ]),
  });

  // Acceso directo tipado a los controles
  email = this.loginForm.controls.email;

  onSubmit() {
    if (this.loginForm.valid()) {
      console.log("Datos:", this.loginForm.value());
    }
  }
}

SSR y Partial Hydration

Hidratación Granular (Islands)

Angular 22 estabiliza la hidratación parcial. Ahora puedes decirle a Angular qué partes de la página deben hidratarse y cuándo, mejorando masivamente el TTI (Time to Interactive).

@Component({
  selector: "app-home",
  template: `
    <app-hero />
    <!-- Estático, sin hidratación -->

    <!-- Se hidrata solo cuando es visible en el viewport -->
    <app-heavy-chart @defer (on viewport) />

    <!-- Se hidrata en interacciones específicas -->
    <app-comments-section @hydrate (on interaction) />
  `,
})
export class HomeComponent {}

Signal-Based Router

Rutas y Parámetros como Señales

El Router de Angular se ha reescrito para exponer toda su API a través de Signals, reduciendo la necesidad de inyectar ActivatedRoute y suscribirse a Observables para tareas simples.

import { Component, inject } from "@angular/core";
import { RouterSignalService } from "@angular/router";

@Component({
  selector: "app-product-details",
  template: `
    @if (productId(); as id) {
      <h1>Producto {{ id }}</h1>
      <p>Buscando en categoría: {{ categoryQuery() }}</p>
    }
  `,
})
export class ProductDetailsComponent {
  private routerSignals = inject(RouterSignalService);

  // Parámetros de ruta reactivos
  productId = this.routerSignals.param("id");

  // Query params reactivos
  categoryQuery = this.routerSignals.queryParam("category");
}

Guía de Migración a Angular 22

Paso 1: Actualización Automática

Como siempre, Angular proporciona herramientas poderosas para actualizar tu código.

# Actualiza globalmente el CLI
npm install -g @angular/cli@22

# Ejecuta el actualizador
ng update @angular/core@22 @angular/cli@22

Paso 2: Eliminación de Zone.js (Opcional pero Recomendado)

Si tu aplicación en Angular 21 ya funcionaba sin fallos bajo el modo experimental Zoneless, puedes dar el salto definitivo:

Elimina zone.js de package.json y angular.json (polyfills).
Limpia los imports de zone.js en tu main.ts.

Paso 3: Migración a Signal Forms

Angular CLI incluye un schematic para comenzar a mover tus ReactiveForms a SignalForms.

ng generate @angular/core:signal-forms-migrate

Performance: El Angular Más Rápido

Gracias a la culminación del proyecto Zoneless y la adopción de esbuild/Vite en todos los niveles, los números de Angular 22 son asombrosos:

Reducción de Bundle: -25% de tamaño promedio en la build de producción al eliminar Zone.js y simplificar RxJS.
LCP y TTI: Mejoras del 40% en tiempos de carga interactiva utilizando Partial Hydration.
Tiempos de Build: Vite y esbuild ahora cachean resultados agresivamente, haciendo que las recargas en caliente (HMR) sean casi instantáneas.

Conclusión

Angular 22 no es solo una versión más; es la realización de la visión moderna del framework. Al adoptar completamente los Signals y eliminar Zone.js, Angular se ha deshecho de su “magia oscura” para ofrecer un modelo mental explícito, predecible y extraordinariamente rápido.

💡 Próximos Pasos recomendados

Revisa tu aplicación actual para buscar dependencias implícitas de Zone.js.
Empieza a familiarizarte con Signal Forms.
Aprovecha @defer y @hydrate si el SSR es crucial para tu producto.