Angular 21 isn\u2019t just another release with niche APIs. It shifts the \u201cdefault way\u201d Angular apps are built and tested:<\/p>\n\n\n\n
Angular 21 pushes Angular further into a reactive-by-design<\/strong> framework:<\/p>\n\n\n\n If you understand one sentence, make it this:<\/p>\n\n\n\n In Angular 21, the UI updates because your state is reactive \u2014 not because Angular \u201cnoticed some async happened somewhere\u201d.<\/p><\/blockquote>\n\n\n\n Historically, Angular had two main form styles:<\/p>\n\n\n\n Signal Forms aim to combine:<\/p>\n\n\n\n Let\u2019s use a flight search form: Before (Reactive Forms, simplified)<\/em><\/strong> ==><\/em><\/strong><\/p>\n\n\n\n You can see the power\u2014but also the verbosity (builders, getters, arrays, groups).<\/p>\n\n\n\n Now (Signal Forms<\/em><\/strong>) ==><\/em><\/strong><\/p>\n\n\n\n Signal Forms generate a FieldTree<\/strong>. Think of it as:<\/p>\n\n\n\n So Angular can update only the parts of the form that changed.<\/p>\n\n\n\n Signal Forms bind fields through a Angular relied on Zone.js<\/strong> to monkey-patch browser APIs (timers, promises, events). After an async task finished, Zone would tell Angular:<\/p>\n\n\n\n \u201cSomething happened\u2014run change detection.\u201d<\/p><\/blockquote>\n\n\n\n This was convenient, but had downsides:<\/p>\n\n\n\n Angular now expects our UI updates to be driven by:<\/p>\n\n\n\n This matches the \u201cexplicit reactivity\u201d model.<\/p>\n\n\n\n If we want the old behavior, we can re-enable Zone-based change detection:<\/p>\n\n\n\n And we must also re-add Zoneless usually works wherever OnPush<\/strong> used to work well. Still, watch for:<\/p>\n\n\n\n 1. Remove Zone.js<\/strong><\/p>\n\n\n\n Delete zone.js (and zone.js\/testing) from angular.json polyfills (build & test). If you have a polyfills.ts, remove import ‘zone.js’.<\/p>\n\n\n\n 2. Enable zoneless change detection<\/strong><\/p>\n\n\n\n 3. (Recommended) Add browser error listeners<\/strong><\/p>\n\n\n\n 4. Run tests & remove warning<\/strong> If you see Yes. Template events<\/strong> (like Angular has been moving away from Karma for a while. Angular 21 makes Vitest<\/strong> the modern direction, using:<\/p>\n\n\n\n For existing projects:<\/p>\n\n\n\n Because Vitest tests run zoneless, Angular\u2019s Zone testing utilities like If we need \u201ctime control\u201d (debounce, timers, etc.), we should use Vitest fake timers:<\/p>\n\n\n\n Because timers often trigger microtasks<\/strong> (Promises). The async variant waits for those too, making tests more deterministic.<\/p>\n\n\n\n By default, Vitest runs tests in Node with a simulated DOM (via If we want real browser behavior<\/strong>, we can use browser mode<\/strong>.<\/p>\n\n\n\n we can also run multiple browsers (e.g., Chromium, Firefox, WebKit) depending on our needs.<\/p>\n\n\n\n This is the same \u201ctesting philosophy\u201d popularized by Testing Library:<\/p>\n\n\n\n Angular 21 also mentions an enhanced MCP server<\/strong>\u2014which is about connecting AI tools to our dev environment in a structured way.<\/p>\n\n\n\n Instead of \u201ccopy\/paste prompts\u201d, MCP-style integration can allow tools to:<\/p>\n\n\n\n Angular 21 isn\u2019t just another release with niche APIs. It shifts the \u201cdefault way\u201d Angular apps are built and tested: Signal Forms (experimental): a new, signal-based form API that feels lightweight like template-driven forms but stays powerful like reactive forms. Zoneless by default: change detection becomes explicit and predictable\u2014driven by signals, inputs, and events, not by Zone.js patching our browser […]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[1107,1102,1103,1106,1105,1104,803,1093,1061],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/4200"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=4200"}],"version-history":[{"count":3,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/4200\/revisions"}],"predecessor-version":[{"id":4239,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/4200\/revisions\/4239"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=4200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=4200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=4200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\n\n\n1) Signal Forms (experimental): Reactive Forms powered by Signals<\/h4>\n\n\n\n
What problem does it solve?<\/span><\/h5>\n\n\n\n
Before: Template-driven forms<\/h5>\n\n\n\n
Before: Reactive forms (
FormControl<\/code>, FormGroup<\/code>, FormArray<\/code>)<\/h5>\n\n\n\nNow: Signal Forms<\/h5>\n\n\n\n
1.1 A \u201cBefore vs Now\u201d example<\/span><\/h4>\n\n\n\n
from<\/code>, to<\/code>, nested details<\/code>, and a list of layovers<\/code>.<\/p>\n\n\n\nimport { Component } from '@angular\/core';\nimport { FormArray, FormBuilder, Validators } from '@angular\/forms';\n\n@Component({\n selector: 'app-flight-search',\n templateUrl: '.\/flight-search.component.html',\n})\nexport class FlightSearchComponent {\n form = this.fb.group({\n from: this.fb.control('Graz', [Validators.required, Validators.minLength(3)]),\n to: this.fb.control('Hamburg', [Validators.required, Validators.minLength(3)]),\n details: this.fb.group({\n maxLayovers: this.fb.control(0),\n maxPrice: this.fb.control(200),\n }),\n layovers: this.fb.array([\n this.fb.group({\n airport: this.fb.control(''),\n minDuration: this.fb.control(0),\n }),\n ]),\n });\n\n constructor(private fb: FormBuilder) {}\n\n get layovers() {\n return this.form.get('layovers') as FormArray;\n }\n\n addLayover() {\n this.layovers.push(\n this.fb.group({\n airport: this.fb.control(''),\n minDuration: this.fb.control(0),\n })\n );\n }\n\n search() {\n const { from, to } = this.form.value;\n \/\/ ...\n }\n}\n<\/code><\/pre>\n\n\n\nimport { Component, signal } from '@angular\/core';\nimport { form, required, minLength, validate, SchemaPath } from '@angular\/forms\/signals';\n\ntype Layover = { airport: string; minDuration: number };\n\n@Component({\n selector: 'app-flight-search',\n templateUrl: '.\/flight-search.component.html',\n})\nexport class FlightSearchComponent {\n filter = signal({\n from: 'Graz',\n to: 'Hamburg',\n details: {\n maxLayovers: 0,\n maxPrice: 200,\n },\n layovers: [{ airport: '', minDuration: 0 }] as Layover[],\n });\n\n filterForm = form(this.filter, (path) => {\n required(path.from);\n minLength(path.from, 3);\n\n required(path.to);\n minLength(path.to, 3);\n\n const allowed = ['Graz', 'Hamburg', 'Paris'];\n validateAirport(path.from, allowed);\n });\n\n addLayover(): void {\n this.filter.update((filter) => ({\n ...filter,\n layovers: [...filter.layovers, { airport: '', minDuration: 0 }],\n }));\n }\n\n search(): void {\n const { from, to } = this.filterForm().value();\n \/\/ ...\n }\n}\n\nfunction validateAirport(path: SchemaPath<string>, allowed: string[]) {\n validate(path, (ctx) => {\n if (allowed.includes(ctx.value())) return null;\n\n return {\n kind: 'airport_not_supported',\n allowed,\n actual: ctx.value(),\n };\n });\n}\n<\/code><\/pre>\n\n\n\n1.2 What is a
FieldTree<\/code> (in plain English)?<\/h4>\n\n\n\n1.3 Binding inputs (Signal Forms template)<\/h4>\n\n\n\n
field<\/code> directive:<\/p>\n\n\n\n<form>\n <label>\n From\n <input aria-label=\"from\" [field]=\"filterForm.from\" \/>\n <\/label>\n <pre>{{ filterForm.from().errors() | json }}<\/pre>\n\n <label>\n To\n <input aria-label=\"to\" [field]=\"filterForm.to\" \/>\n <\/label>\n <pre>{{ filterForm.to().errors() | json }}<\/pre>\n\n <!-- \"Field Group\" -->\n <input type=\"number\" [field]=\"filterForm.details.maxLayovers\" \/>\n <input type=\"number\" [field]=\"filterForm.details.maxPrice\" \/>\n\n <!-- \"Field Array\" -->\n @for (layover of filterForm.layovers; track $index) {\n <input [field]=\"layover.airport\" \/>\n <input type=\"number\" [field]=\"layover.minDuration\" \/>\n }\n<\/form>\n<\/code><\/pre>\n\n\n\nKey takeaway<\/h4>\n\n\n\n
filter<\/code>)<\/strong><\/li>filterForm<\/code>)<\/strong><\/li>FieldTree nodes<\/code> directly to inputs<\/li><\/ul>\n\n\n\n
\n\n\n\n2) Zoneless by Default: Change detection without Zone.js<\/h4>\n\n\n\n
Before: How Angular \u201cknew\u201d to update the UI<\/span><\/h4>\n\n\n\n
Now: Zoneless is the default in Angular 21<\/h4>\n\n\n\n
async<\/code> pipe<\/strong> (still great)<\/li>(click)<\/code> (still triggers updates)<\/li>2.1 Opting back into Zone.js (if you must)<\/h4>\n\n\n\n
import { bootstrapApplication, provideZoneChangeDetection } from '@angular\/core';\nimport { AppComponent } from '.\/app\/app.component';\n\nbootstrapApplication(AppComponent, {\n providers: [provideZoneChangeDetection()],\n});\n<\/code><\/pre>\n\n\n\nzone.js<\/code> to polyfills (angular.json<\/code> \/ polyfills.ts<\/code>) depending on our setup.<\/p>\n\n\n\n2.2 A newcomer-friendly \u201cwhat breaks\u201d checklist<\/h4>\n\n\n\n
setTimeout(() => ...)<\/code> used to force UI refreshasync<\/code> pipe, or explicit state updates<\/li><\/ul><\/li><\/ul>\n\n\n\nMigration guide<\/strong><\/span><\/h4>\n\n\n\n
import { bootstrapApplication, provideZonelessChangeDetection } from '@angular\/core';\nimport { AppComponent } from '.\/app\/app.component';\n\nbootstrapApplication(AppComponent, {\n providers: [provideZonelessChangeDetection()]\n});<\/code><\/pre>\n\n\n\nimport { provideBrowserGlobalErrorListeners } from '@angular\/core';\n\nbootstrapApplication(AppComponent, {\n providers: [\n provideZonelessChangeDetection(),\n provideBrowserGlobalErrorListeners()\n ]\n});<\/code><\/pre>\n\n\n\nNG0914: using zoneless but still loading Zone.js<\/code>, you missed a polyfill. Clean it up and rerun.<\/p>\n\n\n\n\u201cWill my app still update when I click a button?\u201d<\/em><\/h4>\n\n\n\n
(click)<\/code>) still trigger change detection. Signals<\/strong> and input changes<\/strong> do, too. What we lose<\/em> is the blanket \u201ceverything async triggers CD\u201d behavior. If we relied on that implicitly, now we\u2019ll make it explicit\u2014which is a good<\/strong> thing for performance and clarity.<\/p>\n\n\n\nCommon patterns that \u201cjust work\u201d<\/h4>\n\n\n\n
\/\/ model signal\nconst count = signal(0);\nconst double = computed(() => count() * 2);\n\n\/\/ event updates the signal\nincrement() { count.set(count() + 1); }<\/code><\/pre>\n\n\n\nGotchas to check for<\/span><\/h4>\n\n\n\n
\n\n\n\n3) Vitest replaces Karma: faster, modern, and zoneless<\/h4>\n\n\n\n
@angular\/build:unit-test<\/code> (dedicated builder)<\/li>
\n\n\n\n3.1 Migration: schematic<\/h4>\n\n\n\n
ng g @schematics\/angular:refactor-jasmine-vitest\n<\/code><\/pre>\n\n\n\n3.2 \u201cBefore vs Now\u201d: spies and mocks<\/h4>\n\n\n\n
Before (Jasmine)<\/span><\/h4>\n\n\n\n
spyOn(flightService, 'find').and.callThrough();\nspyOn(flightService, 'find').and.returnValue(of([]));\n<\/code><\/pre>\n\n\n\nNow (Vitest)<\/h4>\n\n\n\n
import { vi } from 'vitest';\n\nvi.spyOn(flightService, 'find'); \/\/ calls through by default\nvi.spyOn(flightService, 'find').mockImplementation((_from, _to) => of([]));\n<\/code><\/pre>\n\n\n\n3.3 Goodbye
fakeAsync<\/code>\/tick<\/code> (zoneless tests) ? hello Vitest fake timers<\/h4>\n\n\n\nfakeAsync<\/code> and tick()<\/code> are not available.<\/p>\n\n\n\nimport { TestBed } from '@angular\/core\/testing';\nimport { debounceTime, Subject } from 'rxjs';\nimport { vi } from 'vitest';\nimport { toSignal } from '@angular\/core\/rxjs-interop';\n\ndescribe('simulated input', () => {\n beforeEach(() => {\n vi.useFakeTimers();\n });\n\n it('is updated after debouncing', async () => {\n await TestBed.runInInjectionContext(async () => {\n const input = createInput();\n\n input.set('Hello');\n\n await vi.runAllTimersAsync();\n expect(input.value()).toBe('Hello');\n });\n });\n});\n\nfunction createInput() {\n const input$ = new Subject<string>();\n const inputSignal = toSignal(input$.pipe(debounceTime(300)), {\n initialValue: '',\n });\n\n return {\n value: inputSignal,\n set(value: string) {\n input$.next(value);\n },\n };\n}\n<\/code><\/pre>\n\n\n\nWhy
runAllTimersAsync()<\/code>?<\/h4>\n\n\n\n
\n\n\n\n4) Vitest Browser Mode: real browser tests (Chromium\/Firefox\/WebKit)<\/h4>\n\n\n\n
happy-dom<\/code> or jsdom<\/code>). That\u2019s fast\u2014but not always realistic.<\/p>\n\n\n\n4.1 Install a browser provider (Playwright-based)<\/h4>\n\n\n\n
npm install -D @vitest\/browser-playwright\n<\/code><\/pre>\n\n\n\n4.2 Configure browsers in
angular.json<\/code><\/h4>\n\n\n\n{\n \"test\": {\n \"builder\": \"@angular\/build:unit-test\",\n \"options\": {\n \"browsers\": [\"Chromium\"]\n },\n \"configurations\": {\n \"ci\": {\n \"browsers\": [\"ChromiumHeadless\"]\n }\n }\n }\n}\n<\/code><\/pre>\n\n\n\n4.3 Example test using accessibility queries<\/h4>\n\n\n\n
import { page } from 'vitest\/browser';\n\nit('should have a disabled search button without params', async () => {\n await page.getByLabelText('from').fill('');\n await page.getByLabelText('to').fill('');\n\n const button = page.getByRole('button', { name: 'search' }).element() as HTMLButtonElement;\n expect(button.disabled).toBeTruthy();\n});\n<\/code><\/pre>\n\n\n\nWhy this is great for newcomers<\/h4>\n\n\n\n
\n\n\n\n5) Enhanced MCP server: AI-supported development workflows<\/h4>\n\n\n\n
What it means in practice<\/h4>\n\n\n\n
What to watch for<\/h3>\n\n\n\n