{"id":1334,"date":"2026-06-18T19:44:57","date_gmt":"2026-06-18T22:44:57","guid":{"rendered":"https:\/\/maurobernal.com.ar\/blog\/?p=1334"},"modified":"2026-06-18T19:44:57","modified_gmt":"2026-06-18T22:44:57","slug":"angular-22-signals-first-zoneless-guia-tecnica","status":"publish","type":"post","link":"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/","title":{"rendered":"Manual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless"},"content":{"rendered":"

El ecosistema de desarrollo frontend se encuentra en una fase de transformaci\u00f3n profunda. Lanzado el 3 de junio de 2026<\/strong>, Angular 22 consolida un cambio de paradigma largamente proyectado por el equipo central del framework: la transici\u00f3n definitiva de un motor de renderizado y detecci\u00f3n de cambios basado en eventos globales impl\u00edcitos hacia un modelo puramente reactivo, expl\u00edcito, s\u00edncrono y de grano fino.<\/p>\n

Esta versi\u00f3n de producci\u00f3n robustece las arquitecturas basadas en se\u00f1ales (Signals)<\/strong>, elimina dependencias heredadas y unifica la experiencia de desarrollo a trav\u00e9s de herramientas de compilaci\u00f3n ultraprecisas y automatizaciones integradas para procesos de ingenier\u00eda complejos.<\/p>\n

El presente reporte t\u00e9cnico provee un an\u00e1lisis arquitect\u00f3nico exhaustivo de las novedades de Angular 22, dise\u00f1ado para servir como recurso de referencia para ingenieros de software senior, arquitectos de soluciones, y creadores de contenido de tecnolog\u00eda orientados a la producci\u00f3n de tutoriales profundos en blogs y plataformas de video.<\/p>\n\n

1. La Arquitectura Zoneless y OnPush como Nuevo Est\u00e1ndar<\/h2>\n

Durante la \u00faltima d\u00e9cada, la detecci\u00f3n de cambios de Angular dependi\u00f3 de la biblioteca zone.js<\/code>, la cual modificaba de forma global las APIs as\u00edncronas del navegador (monkey-patching) para interceptar promesas, temporizadores y eventos DOM. Este esquema implicaba un alto costo de c\u00f3mputo al verse obligado a chequear el \u00e1rbol de componentes completo de forma jer\u00e1rquica cuando se produc\u00eda cualquier cambio de estado.<\/p>\n

Angular 22 invierte este modelo estableciendo de manera predeterminada la estrategia ChangeDetectionStrategy.OnPush<\/code> en todos los componentes nuevos. Al trabajar bajo este est\u00e1ndar, se minimizan los ciclos redundantes de renderizado, limit\u00e1ndolos exclusivamente a componentes cuyas entradas cambien de referencia o que contengan Signals reactivas locales.<\/p>\n\n\n\n\n\n\n\n\n
Caracter\u00edstica<\/th>\nModelo Eager (Legacy)<\/th>\nModelo OnPush (Angular 22)<\/th>\n<\/tr>\n<\/thead>\n
Monitoreo de Eventos<\/td>\nGlobal e impl\u00edcito por zone.js<\/td>\nExpl\u00edcito y localizado mediante Signals o markForCheck<\/td>\n<\/tr>\n
Consumo de Memoria<\/td>\nMayor, por parcheo de APIs as\u00edncronas<\/td>\nReducido, posibilitando paquetes Zoneless ligeros<\/td>\n<\/tr>\n
Complejidad Algor\u00edtmica<\/td>\nO(N) \u2014 todo el \u00e1rbol de componentes<\/td>\nO(1) \u2014 solo el componente afectado<\/td>\n<\/tr>\n
Migraci\u00f3n<\/td>\nRequiere APIs as\u00edncronas tradicionales<\/td>\nAutomatizada via transformaciones en @Component<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Caso Pr\u00e1ctico: Panel de Monitoreo de Turbinas E\u00f3licas<\/h3>\n

Un tablero de control que recibe telemetr\u00eda en tiempo real (vibraci\u00f3n, RPM, temperatura). La detecci\u00f3n de cambios tradicional sobrecargar\u00eda el hilo principal del navegador; la soluci\u00f3n Zoneless renderiza \u00fanicamente el componente afectado.<\/p>\n

\/\/ app.config.ts \u2014 Arranque sin zone.js\nimport { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular\/core';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideExperimentalZonelessChangeDetection()]\n};\n<\/code><\/pre>\n
import { Component, signal, OnDestroy } from '@angular\/core';\nimport { ChangeDetectionStrategy } from '@angular\/core';\n\n@Component({\n  selector: 'app-turbine-monitor',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `...`\n})\nexport class TurbineMonitor implements OnDestroy {\n  protected readonly rpm = signal(0);\n  protected readonly temp = signal(45);\n  private timerId: any;\n  constructor() {\n    this.timerId = setInterval(() => {\n      this.rpm.set(Math.floor(15 + Math.random() * 5));\n      this.temp.update(t => parseFloat((t + (Math.random() > 0.5 ? 0.5 : -0.5)).toFixed(1)));\n    }, 250);\n  }\n  ngOnDestroy(): void { clearInterval(this.timerId); }\n}\n<\/code><\/pre>\n\n
2. Componentes Selectorless e Importaciones Impl\u00edcitas<\/h2>\n
Hasta Angular 21, la integraci\u00f3n de un componente standalone requer\u00eda su inclusi\u00f3n expl\u00edcita en el arreglo imports<\/code> del componente padre, adem\u00e1s de un selector CSS. Angular 22 introduce los Componentes Selectorless<\/strong>: al omitir la propiedad selector<\/code>, Angular usa el nombre de la clase TypeScript (PascalCase) directamente como tag en la plantilla. El compilador resuelve las dependencias leyendo las sentencias import<\/code> ESM del archivo.<\/p>\n
@Directive()\nexport class Tooltip {\n  text = input.required();\n  private readonly host = inject(ElementRef);\n  constructor() {\n    effect(() => this.host.nativeElement.setAttribute('title', this.text()));\n  }\n}\n\n@Component({\n  template: `<span class=\"price-badge\">{{ value() | currency:'EUR' }}<\/span>`\n})\nexport class PriceBadge {\n  value = input.required();\n}\n\n@Component({\n  standalone: true,\n  template: `\n    <article>\n      <PriceBadge [value]=\"120\" \/>\n      <button @Tooltip=\"'A\u00f1adir al carrito'\">A\u00f1adir<\/button>\n    <\/article>\n  `\n})\nexport class ProductCatalog {}\n<\/code><\/pre>\n\n
3. Resource API Estable: Fin de la Verbosidad As\u00edncrona<\/h2>\n
La estabilizaci\u00f3n de la Resource API<\/strong> (resource<\/code>, rxResource<\/code>, httpResource<\/code>) resuelve la integraci\u00f3n as\u00edncrona mediante se\u00f1ales nativas auto-gestionadas, reemplazando tuber\u00edas complejas de RxJS.<\/p>\n
    \n
  • Cancelaci\u00f3n autom\u00e1tica<\/strong> de peticiones HTTP en vuelo al cambiar dependencias (equivalente a switchMap<\/code>).<\/li>\n
  • chain()<\/code><\/strong>: recursos jer\u00e1rquicos que esperan resoluci\u00f3n del recurso padre antes de ejecutarse.<\/li>\n
  • resourceFromSnapshots<\/code><\/strong>: composici\u00f3n reactiva sobre instant\u00e1neas hist\u00f3ricas sin re-ejecutar llamadas al servidor.<\/li>\n<\/ul>\n
    protected readonly clientResource = httpResource(() =>\n  `\/api\/clients\/${this.selectedClientId()}`\n);\n\nprotected readonly ticketsResource = httpResource({\n  params: ({ chain }) => {\n    const client = chain(this.clientResource);\n    return { clientId: client.id };\n  },\n  request: (params) => `\/api\/tickets?clientId=${params.clientId}`\n});\n\nprotected readonly criticalTickets = resourceFromSnapshots(\n  this.ticketsResource.snapshot,\n  (snap) => (snap.value ?? []).filter(t => t.severity === 'high')\n);\n<\/code><\/pre>\n\n
    4. Signal Forms Estable: Formularios Reactivos de Nueva Generaci\u00f3n<\/h2>\n
    El paquete @angular\/forms\/signals<\/code> alcanza estabilidad de producci\u00f3n en Angular 22. Compatible con esquemas de validaci\u00f3n modernos de terceros (Zod, Valibot) y optimizado para evitar renderizados redundantes.<\/p>\n
      \n
    • Validadores de fechas<\/strong>: minDate()<\/code> y maxDate()<\/code> integrados en el core.<\/li>\n
    • Debounce avanzado<\/strong>: debounce(field, delay)<\/code> o debounce(field, 'blur')<\/code>.<\/li>\n
    • Cl\u00e1usula when<\/code><\/strong>: l\u00f3gica de validadores y estados din\u00e1micos bajo una firma unificada.<\/li>\n
    • getError()<\/code><\/strong>: b\u00fasqueda de fallos tipados directamente desde la plantilla con narrowing de tipos.<\/li>\n
    • validateHttp()<\/code><\/strong>: validaci\u00f3n as\u00edncrona contra endpoints HTTP con debounce integrado.<\/li>\n<\/ul>\n
      protected readonly accountForm = form(\n  signal({ username: '', password: '', birthDate: new Date(), email: '' }),\n  (tree) => {\n    validateStandardSchema(tree, AccountSchema);\n    required(tree.username);\n    minLength(tree.username, 5);\n    minDate(tree.birthDate, new Date('1990-01-01'));\n    debounce(tree.password, 'blur');\n    validateHttp(tree.email, {\n      request: (v) => `\/api\/auth\/check-email?value=${v.value()}`,\n      debounce: 500\n    });\n  }\n);\n<\/code><\/pre>\n\n
      5. Inyecci\u00f3n de Dependencias Moderna: @Service e injectAsync()<\/h2>\n
      Decorador @Service<\/h3>\n
      Reemplaza el verboso @Injectable({ providedIn: 'root' })<\/code>. Registra el servicio autom\u00e1ticamente a nivel ra\u00edz y promueve inject()<\/code> funcional sobre la inyecci\u00f3n por constructor.<\/p>\n
      @Service()\nexport class ExcelReportExporter {\n  private readonly http = inject(HttpClient);\n  exportData(payload: any): void { \/* l\u00f3gica de exportaci\u00f3n *\/ }\n}\n<\/code><\/pre>\n
      injectAsync() \u2014 Code-Splitting Nativo<\/h3>\n
      Carga dependencias pesadas de forma diferida, generando divisi\u00f3n de paquetes a nivel del empaquetador. prefetch: onIdle<\/code> descarga el recurso durante inactividad del navegador sin bloquear el hilo principal.<\/p>\n
      private readonly exporterLoader = injectAsync(\n  () => import('.\/excel-report-exporter.service').then(m => m.ExcelReportExporter),\n  { prefetch: () => onIdle({ timeout: 2000 }) }\n);\n\nprotected async generateReport() {\n  const exporter = await this.exporterLoader();\n  exporter.exportData(this.transacciones());\n}\n<\/code><\/pre>\n\n
      6. Enrutamiento Inteligente: browserUrl y Herencia de Par\u00e1metros<\/h2>\n
      El m\u00f3dulo @angular\/router<\/code> incorpora dos mejoras enfocadas en SEO y ergonom\u00eda:<\/p>\n
        \n
      • browserUrl<\/code> (URL Decoupling)<\/strong>: expone una URL amigable\/SEO en la barra del navegador mientras el router gestiona internamente la ruta t\u00e9cnica parametrizada.<\/li>\n
      • paramsInheritanceStrategy: 'always'<\/code> por defecto<\/strong>: los componentes hijos consumen autom\u00e1ticamente par\u00e1metros de rutas padres sin configuraci\u00f3n expl\u00edcita adicional.<\/li>\n<\/ul>\n
        <!-- URL visible: \/perfil-seo | URL interna: \/estudiantes\/4029\/dashboard -->\n<a [routerLink]=\"['\/estudiantes', 4029, 'dashboard']\"\n   [browserUrl]=\"'\/perfil-seo'\">\n  Ver Mi Ficha Acad\u00e9mica\n<\/a>\n<\/code><\/pre>\n\n
        7. Nuevas Caracter\u00edsticas de Plantilla: @boundary, Spread y Lambdas Inline<\/h2>\n
        @boundary \u2014 Aislamiento de Fallos (Developer Preview)<\/h3>\n
        Directiva estructural nativa que atrapa excepciones de renderizado en subcomponentes, evitando que el fallo destruya el \u00e1rbol DOM superior. El resto de la interfaz permanece interactivo.<\/p>\n
        @boundary {\n  <HeavyThreeDVisualizer [data]=\"chartData()\" \/>\n} @catch (error) {\n  <div class=\"fallback-panel\">\n    <p>Visualizaci\u00f3n no disponible: {{ error.message }}<\/p>\n  <\/div>\n}\n<\/code><\/pre>\n
        Otras mejoras sint\u00e1cticas en plantillas:<\/p>\n
          \n
        • Comentarios en atributos<\/strong>: sintaxis \/\/<\/code> y \/* *\/<\/code> en declaraciones multil\u00ednea, sin afectar el HTML generado.<\/li>\n
        • Sintaxis Spread (...<\/code>)<\/strong>: propagar propiedades de objetos directamente en [style]<\/code> o [attr]<\/code>.<\/li>\n
        • Funciones Flecha Inline<\/strong>: lambdas de un solo uso en event bindings sin necesitar m\u00e9todo en el componente.<\/li>\n<\/ul>\n\n
          8. Angular Aria Estable y WebMCP para IA<\/h2>\n
          Angular Aria \u2014 Producci\u00f3n Estable<\/h3>\n
          Las doce directivas y patrones de dise\u00f1o accesible<\/strong> de Angular Aria alcanzan producci\u00f3n estable. Cubren atrapado de foco de teclado, anuncios de s\u00edntesis de voz en regiones din\u00e1micas, soporte para lectores de pantalla, navegaci\u00f3n por teclas direccionales, integraci\u00f3n nativa con Signal Forms y test harnesses incluidos.<\/p>\n
          WebMCP: Model Context Protocol Estable en el CLI<\/h3>\n
          El Angular CLI incluye soporte estable para MCP (Model Context Protocol)<\/strong> desde v22. Mediante provideExperimentalWebMcpTools<\/code>, la aplicaci\u00f3n registra herramientas estructuradas que permiten a agentes de IA autocompletar formularios, inspeccionar el \u00e1rbol de inyecci\u00f3n y corregir fallos de forma predictiva, sin necesidad de escanear el DOM.<\/p>\n
          export const aiEnabledConfig: ApplicationConfig = {\n  providers: [\n    provideExperimentalWebMcpTools([\n      declareExperimentalWebMcpTool({\n        name: 'fetch_system_status',\n        description: 'Retorna el estado operativo del backend.',\n        execute: async () => {\n          const http = inject(HttpClient);\n          return http.get('\/api\/admin\/health-check').toPromise();\n        }\n      })\n    ])\n  ]\n};\n<\/code><\/pre>\n\n
          9. Modernizaci\u00f3n del Testing: Vitest como Motor por Defecto<\/h2>\n
          Angular 22 adopta Vitest como motor de testing por defecto<\/strong> en todos los proyectos nuevos generados por el CLI, reemplazando Karma y Jasmine. El soporte experimental para Jest y Web Test Runner fue eliminado.<\/p>\n
            \n
          • TestBed.getFixture()<\/code> reemplazado por TestBed.getLastFixture()<\/code> para mayor consistencia entre specs consecutivos.<\/li>\n
          • Sincronizaci\u00f3n interna via API unificada PendingTasks<\/code> para indicar estado de reposo en pruebas de integraci\u00f3n complejas.<\/li>\n<\/ul>\n
            import { describe, it, expect } from 'vitest';\nimport { TestBed } from '@angular\/core\/testing';\n\ndescribe('CalculatorCmp', () => {\n  it('resuelve la instancia con las nuevas utilidades de fixture', () => {\n    const fixture = TestBed.createComponent(CalculatorCmp);\n    fixture.detectChanges();\n    const active = TestBed.getLastFixture();\n    expect(active).toBeDefined();\n    expect(active?.nativeElement.querySelector('span')?.textContent).toContain('100');\n  });\n});\n<\/code><\/pre>\n\n
            Conclusi\u00f3n<\/h2>\n
            Angular 22 no es una actualizaci\u00f3n incremental: es la consolidaci\u00f3n de un nuevo paradigma. La combinaci\u00f3n de Zoneless + Signals + OnPush por defecto<\/strong> representa la mayor transformaci\u00f3n en la arquitectura del framework desde la versi\u00f3n 2. Los equipos de desarrollo senior encontrar\u00e1n en esta versi\u00f3n las herramientas definitivas para construir aplicaciones de alta performance, accesibles y preparadas para el desarrollo asistido por IA.<\/p>\n
            La ruta de migraci\u00f3n automatizada v\u00eda ng update<\/code> garantiza una transici\u00f3n segura desde bases de c\u00f3digo legacy, mientras que la estabilizaci\u00f3n de Signal Forms y la Resource API elimina la incertidumbre sobre qu\u00e9 APIs llevar a producci\u00f3n.<\/p>\n
            Angular 22 es la versi\u00f3n que el ecosistema frontend esperaba.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
            Gu\u00eda t\u00e9cnica completa de Angular 22 (jun 2026): arquitectura Zoneless, Signals, Resource API estable, Signal Forms, @Service, injectAsync, WebMCP y Vitest. Para desarrolladores senior.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[273],"tags":[475,274,471,276,277,473,474,275,278,284,472,476,279],"class_list":["post-1334","post","type-post","status-publish","format-standard","hentry","category-angular","tag-accesibilidad","tag-angular","tag-angular22","tag-frontend","tag-javascript","tag-resource-api","tag-signal-forms","tag-signals","tag-typescript","tag-vitest","tag-web-development-2","tag-webmcp","tag-zoneless"],"yoast_head":"\nManual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless · devops Mauro Bernal<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Manual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless · devops Mauro Bernal\" \/>\n<meta property=\"og:description\" content=\"Gu\u00eda t\u00e9cnica completa de Angular 22 (jun 2026): arquitectura Zoneless, Signals, Resource API estable, Signal Forms, @Service, injectAsync, WebMCP y Vitest. Para desarrolladores senior.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/\" \/>\n<meta property=\"og:site_name\" content=\"devops Mauro Bernal\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-18T22:44:57+00:00\" \/>\n<meta name=\"author\" content=\"Mauro Bernal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_maurobernal\" \/>\n<meta name=\"twitter:site\" content=\"@_maurobernal\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mauro Bernal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-22-signals-first-zoneless-guia-tecnica\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-22-signals-first-zoneless-guia-tecnica\\\/\"},\"author\":{\"name\":\"Mauro Bernal\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"headline\":\"Manual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless\",\"datePublished\":\"2026-06-18T22:44:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-22-signals-first-zoneless-guia-tecnica\\\/\"},\"wordCount\":1155,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"keywords\":[\"accesibilidad\",\"angular\",\"angular22\",\"frontend\",\"javascript\",\"resource-api\",\"signal-forms\",\"signals\",\"typescript\",\"vitest\",\"web-development\",\"webmcp\",\"zoneless\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-22-signals-first-zoneless-guia-tecnica\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-22-signals-first-zoneless-guia-tecnica\\\/\",\"url\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-22-signals-first-zoneless-guia-tecnica\\\/\",\"name\":\"Manual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless · devops Mauro Bernal\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#website\"},\"datePublished\":\"2026-06-18T22:44:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-22-signals-first-zoneless-guia-tecnica\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-22-signals-first-zoneless-guia-tecnica\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-22-signals-first-zoneless-guia-tecnica\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Manual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/\",\"name\":\"devops Mauro Bernal\",\"description\":\"Cuando tu trabajo es hacer que las cosas funcionen bien...\",\"publisher\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\",\"name\":\"Mauro Bernal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\",\"width\":1740,\"height\":1740,\"caption\":\"Mauro Bernal\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/maurobernal.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/07\\\/logo-maurobernal.png?fit=1740%2C1740&ssl=1\"},\"description\":\"Desarrollo de Sistemas en .Net, IT Callcenters, DBA de SQL Server, Mikrotik, Pentest y T\u00e9cnico consultor de Sistemas Bejerman\",\"sameAs\":[\"https:\\\/\\\/maurobernal.com.ar\",\"https:\\\/\\\/x.com\\\/_maurobernal\",\"https:\\\/\\\/youtube.com\\\/maurobernal\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Manual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless · devops Mauro Bernal","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/","og_locale":"es_ES","og_type":"article","og_title":"Manual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless · devops Mauro Bernal","og_description":"Gu\u00eda t\u00e9cnica completa de Angular 22 (jun 2026): arquitectura Zoneless, Signals, Resource API estable, Signal Forms, @Service, injectAsync, WebMCP y Vitest. Para desarrolladores senior.","og_url":"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/","og_site_name":"devops Mauro Bernal","article_published_time":"2026-06-18T22:44:57+00:00","author":"Mauro Bernal","twitter_card":"summary_large_image","twitter_creator":"@_maurobernal","twitter_site":"@_maurobernal","twitter_misc":{"Escrito por":"Mauro Bernal","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/#article","isPartOf":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/"},"author":{"name":"Mauro Bernal","@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"headline":"Manual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless","datePublished":"2026-06-18T22:44:57+00:00","mainEntityOfPage":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/"},"wordCount":1155,"commentCount":0,"publisher":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"keywords":["accesibilidad","angular","angular22","frontend","javascript","resource-api","signal-forms","signals","typescript","vitest","web-development","webmcp","zoneless"],"articleSection":["Angular"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/","url":"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/","name":"Manual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless · devops Mauro Bernal","isPartOf":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#website"},"datePublished":"2026-06-18T22:44:57+00:00","breadcrumb":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-22-signals-first-zoneless-guia-tecnica\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/maurobernal.com.ar\/blog\/"},{"@type":"ListItem","position":2,"name":"Manual T\u00e9cnico y de Ingenier\u00eda de Angular 22: La Consolidaci\u00f3n de la Era Signals-First y Zoneless"}]},{"@type":"WebSite","@id":"https:\/\/maurobernal.com.ar\/blog\/#website","url":"https:\/\/maurobernal.com.ar\/blog\/","name":"devops Mauro Bernal","description":"Cuando tu trabajo es hacer que las cosas funcionen bien...","publisher":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/maurobernal.com.ar\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283","name":"Mauro Bernal","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1","url":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1","contentUrl":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1","width":1740,"height":1740,"caption":"Mauro Bernal"},"logo":{"@id":"https:\/\/i0.wp.com\/maurobernal.com.ar\/blog\/wp-content\/uploads\/2023\/07\/logo-maurobernal.png?fit=1740%2C1740&ssl=1"},"description":"Desarrollo de Sistemas en .Net, IT Callcenters, DBA de SQL Server, Mikrotik, Pentest y T\u00e9cnico consultor de Sistemas Bejerman","sameAs":["https:\/\/maurobernal.com.ar","https:\/\/x.com\/_maurobernal","https:\/\/youtube.com\/maurobernal"]}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/comments?post=1334"}],"version-history":[{"count":1,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1334\/revisions"}],"predecessor-version":[{"id":1335,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1334\/revisions\/1335"}],"wp:attachment":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/media?parent=1334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/categories?post=1334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/tags?post=1334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}