{"id":1204,"date":"2026-03-11T15:51:30","date_gmt":"2026-03-11T18:51:30","guid":{"rendered":"https:\/\/maurobernal.com.ar\/blog\/?p=1204"},"modified":"2026-03-11T16:12:14","modified_gmt":"2026-03-11T19:12:14","slug":"angular-21-cambio-de-paradigma-signals-zoneless","status":"publish","type":"post","link":"https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/","title":{"rendered":"Angular 21: el cambio de paradigma que no pod\u00e9s ignorar"},"content":{"rendered":"\n

Cuando Angular anunci\u00f3 que las Signals pasaban de experimental a estables, lo tom\u00e9 como \u00abotra API m\u00e1s para aprender\u00bb. Me equivoqu\u00e9. No era una API nueva: era un cambio de paradigma que afecta c\u00f3mo se detectan cambios, c\u00f3mo se construyen formularios, c\u00f3mo funciona el router y hasta c\u00f3mo escribimos los tests. Angular 21 consolida todo eso. Esta serie es lo que me hubiera gustado tener cuando arranqu\u00e9 la migraci\u00f3n.<\/p>\n\n\n\n

El contexto: por qu\u00e9 Angular cambi\u00f3 tan profundamente<\/h2>\n\n\n\n

Durante a\u00f1os, Angular us\u00f3 Zone.js para detectar cu\u00e1ndo algo cambiaba en la aplicaci\u00f3n y disparar la actualizaci\u00f3n del DOM. Zone.js intercepta todas las operaciones as\u00edncronas \u2014 setTimeout, promesas, eventos \u2014 y notifica a Angular para que re-eval\u00fae la vista. Funcionaba. Pero ten\u00eda un costo: bundle m\u00e1s grande, detecci\u00f3n de cambios innecesaria, y comportamiento dif\u00edcil de predecir en aplicaciones complejas.<\/p>\n\n\n\n

Las Signals cambian el modelo de ra\u00edz: en lugar de \u00abrevisar todo cuando algo as\u00edncrono ocurre\u00bb, ahora cada valor sabe exactamente qui\u00e9n depende de \u00e9l y notifica solo a esos dependientes. Es reactivo de verdad, no reactivo por polling.<\/p>\n\n\n\n

Qu\u00e9 cambi\u00f3 de Angular 20 a Angular 21<\/h2>\n\n\n\n
\n
\u00c1rea<\/th>Antes (v20)<\/th>Angular 21<\/th><\/tr><\/thead>
Detecci\u00f3n de cambios<\/td>Zone.js por defecto<\/td>Zoneless por defecto en proyectos nuevos<\/td><\/tr>\n
Formularios<\/td>FormGroup \/ FormControl<\/td>Signal Forms: form()<\/code> y field()<\/code><\/td><\/tr>\n
Router<\/td>Inyecci\u00f3n de Router class<\/td>Funciones standalone con Signals<\/td><\/tr>\n
Testing<\/td>Karma + Jasmine<\/td>Vitest por defecto<\/td><\/tr>\n
Template<\/td>Sintaxis est\u00e1ndar<\/td>Regex literals, spread operator, instanceof<\/td><\/tr>\n
Tooling IA<\/td>Manual<\/td>Soporte MCP nativo (ng mcp<\/code>)<\/td><\/tr>\n
HTTP<\/td>HttpClient observable<\/td>httpResource con Signals<\/td><\/tr>\n<\/tbody><\/table><\/figure>\n\n\n\n

httpResource: el nuevo cliente HTTP basado en Signals<\/h2>\n\n\n\n

Una de las novedades m\u00e1s destacadas de v21.2: httpResource<\/code>. La respuesta de Angular a \u00ab\u00bfc\u00f3mo hago una llamada HTTP y el resultado sea un Signal?\u00bb<\/p>\n\n\n\n

import { Component, signal } from '@angular\/core';\nimport { httpResource } from '@angular\/common\/http';\n\n@Component({\n  selector: 'app-usuarios',\n  template: `\n    @if (usuarios.isLoading()) {\n      <p>Cargando...<\/p>\n    } @else if (usuarios.error()) {\n      <p>Error: {{ usuarios.error()?.message }}<\/p>\n    } @else {\n      <ul>\n        @for (u of usuarios.value(); track u.id) {\n          <li>{{ u.nombre }}<\/li>\n        }\n      <\/ul>\n    }\n  `\n})\nexport class UsuariosComponent {\n  \/\/ Sin subscribe, sin async pipe \u2014 el resultado es un Signal\n  usuarios = httpResource<Usuario[]>('\/api\/usuarios');\n\n  \/\/ Con par\u00e1metros reactivos: se re-fetcha cuando cambia el signal\n  filtro = signal('admin');\n  usuariosFiltrados = httpResource<Usuario[]>(() =>\n    `\/api\/usuarios?rol=${this.filtro()}`\n  );\n}<\/code><\/pre>\n\n\n\n
La hoja de ruta de esta serie<\/h2>\n\n\n\n
    \n
  1. Este art\u00edculo:<\/strong> el panorama general del salto v20 \u2192 v21<\/li>\n
  2. Adi\u00f3s Zone.js: detecci\u00f3n de cambios Zoneless en profundidad<\/li>\n
  3. Signal Forms: formularios reactivos que finalmente tienen sentido<\/li>\n
  4. Novedades del template: regex, spread, instanceof y m\u00e1s<\/li>\n
  5. Vitest reemplaza Karma + soporte MCP nativo<\/li>\n
  6. Router Signals: navegaci\u00f3n standalone sin cargar todo el Router<\/li>\n
  7. Gu\u00eda pr\u00e1ctica de migraci\u00f3n de Angular 19\/20 a Angular 21.2<\/li>\n<\/ol>\n\n\n\n
    Si est\u00e1s trabajando con Angular en proyectos .NET \u2014 como yo, donde el backend es ASP.NET y el frontend es Angular \u2014 estos cambios son especialmente relevantes. La adopci\u00f3n de Signals reduce considerablemente el gap conceptual entre el modelo reactivo del frontend y los patrones async\/await del backend. Empecemos.<\/p>\n\n
    \n
    Serie Angular 20 \u2192 21.2<\/strong> | Pr\u00f3ximo: Adi\u00f3s Zone.js: c\u00f3mo Angular 21 cambi\u00f3 la detecci\u00f3n de cambios para siempre \u2192<\/a><\/em><\/p>","protected":false},"excerpt":{"rendered":"
    De Zone.js a Signals: qu\u00e9 cambi\u00f3 de Angular 20 a 21.2, por qu\u00e9 importa y qu\u00e9 cubre esta serie. httpResource, Signal Forms, Vitest y el nuevo router basado en Signals.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_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}},"categories":[273],"tags":[274,291,276,277,275,278],"class_list":["post-1204","post","type-post","status-publish","format-standard","hentry","category-angular","tag-angular","tag-angular21","tag-frontend","tag-javascript","tag-signals","tag-typescript"],"yoast_head":"\nAngular 21: el cambio de paradigma que no pod\u00e9s ignorar · 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-21-cambio-de-paradigma-signals-zoneless\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular 21: el cambio de paradigma que no pod\u00e9s ignorar · devops Mauro Bernal\" \/>\n<meta property=\"og:description\" content=\"De Zone.js a Signals: qu\u00e9 cambi\u00f3 de Angular 20 a 21.2, por qu\u00e9 importa y qu\u00e9 cubre esta serie. httpResource, Signal Forms, Vitest y el nuevo router basado en Signals.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/\" \/>\n<meta property=\"og:site_name\" content=\"devops Mauro Bernal\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-11T18:51:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T19:12:14+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=\"3 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-21-cambio-de-paradigma-signals-zoneless\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-cambio-de-paradigma-signals-zoneless\\\/\"},\"author\":{\"name\":\"Mauro Bernal\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"headline\":\"Angular 21: el cambio de paradigma que no pod\u00e9s ignorar\",\"datePublished\":\"2026-03-11T18:51:30+00:00\",\"dateModified\":\"2026-03-11T19:12:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-cambio-de-paradigma-signals-zoneless\\\/\"},\"wordCount\":446,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/09c4dbdfb59b20e015c703fd19713283\"},\"keywords\":[\"angular\",\"angular21\",\"frontend\",\"javascript\",\"signals\",\"typescript\"],\"articleSection\":[\"Angular\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-cambio-de-paradigma-signals-zoneless\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-cambio-de-paradigma-signals-zoneless\\\/\",\"url\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-cambio-de-paradigma-signals-zoneless\\\/\",\"name\":\"Angular 21: el cambio de paradigma que no pod\u00e9s ignorar · devops Mauro Bernal\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/#website\"},\"datePublished\":\"2026-03-11T18:51:30+00:00\",\"dateModified\":\"2026-03-11T19:12:14+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-cambio-de-paradigma-signals-zoneless\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-cambio-de-paradigma-signals-zoneless\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/angular-21-cambio-de-paradigma-signals-zoneless\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/maurobernal.com.ar\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular 21: el cambio de paradigma que no pod\u00e9s ignorar\"}]},{\"@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":"Angular 21: el cambio de paradigma que no pod\u00e9s ignorar · 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-21-cambio-de-paradigma-signals-zoneless\/","og_locale":"es_ES","og_type":"article","og_title":"Angular 21: el cambio de paradigma que no pod\u00e9s ignorar · devops Mauro Bernal","og_description":"De Zone.js a Signals: qu\u00e9 cambi\u00f3 de Angular 20 a 21.2, por qu\u00e9 importa y qu\u00e9 cubre esta serie. httpResource, Signal Forms, Vitest y el nuevo router basado en Signals.","og_url":"https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/","og_site_name":"devops Mauro Bernal","article_published_time":"2026-03-11T18:51:30+00:00","article_modified_time":"2026-03-11T19:12:14+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":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/#article","isPartOf":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/"},"author":{"name":"Mauro Bernal","@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"headline":"Angular 21: el cambio de paradigma que no pod\u00e9s ignorar","datePublished":"2026-03-11T18:51:30+00:00","dateModified":"2026-03-11T19:12:14+00:00","mainEntityOfPage":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/"},"wordCount":446,"commentCount":0,"publisher":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#\/schema\/person\/09c4dbdfb59b20e015c703fd19713283"},"keywords":["angular","angular21","frontend","javascript","signals","typescript"],"articleSection":["Angular"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/","url":"https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/","name":"Angular 21: el cambio de paradigma que no pod\u00e9s ignorar · devops Mauro Bernal","isPartOf":{"@id":"https:\/\/maurobernal.com.ar\/blog\/#website"},"datePublished":"2026-03-11T18:51:30+00:00","dateModified":"2026-03-11T19:12:14+00:00","breadcrumb":{"@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/maurobernal.com.ar\/blog\/angular-21-cambio-de-paradigma-signals-zoneless\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/maurobernal.com.ar\/blog\/"},{"@type":"ListItem","position":2,"name":"Angular 21: el cambio de paradigma que no pod\u00e9s ignorar"}]},{"@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\/1204","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=1204"}],"version-history":[{"count":3,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1204\/revisions"}],"predecessor-version":[{"id":1225,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/posts\/1204\/revisions\/1225"}],"wp:attachment":[{"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/media?parent=1204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/categories?post=1204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maurobernal.com.ar\/blog\/wp-json\/wp\/v2\/tags?post=1204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}