{"id":16120,"date":"2026-03-16T09:00:00","date_gmt":"2026-03-16T08:00:00","guid":{"rendered":"https:\/\/wata.es\/?p=16120"},"modified":"2026-02-27T10:37:13","modified_gmt":"2026-02-27T09:37:13","slug":"angular-erneuert-sich-die-verbesserungen-in-version-21-die-du-kennen-solltest","status":"publish","type":"post","link":"https:\/\/wata.es\/de\/angular-erneuert-sich-die-verbesserungen-in-version-21-die-du-kennen-solltest\/","title":{"rendered":"Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest"},"content":{"rendered":"\n<p>Angular bleibt eines der solidesten, umfassendsten und relevantesten Frameworks auf dem Markt, insbesondere im Unternehmensumfeld und bei gro\u00df angelegten Projekten.<\/p>\n\n\n\n<p>Mit <a href=\"https:\/\/purpleblob.net\/en\/generate-thousands-of-data-each-day-but-youre-not-taking-advantage-of\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">Version 21<\/a> (ver\u00f6ffentlicht Ende November 2025) f\u00fchrt Angular mehrere wichtige Neuerungen f\u00fcr Entwickler:innen und Teams ein. Zu den wichtigsten Highlights z\u00e4hlen:<\/p>\n\n\n\n<p>In diesem Artikel erkl\u00e4ren wir zun\u00e4chst einfach, was <strong>Angular<\/strong> ist, und gehen anschlie\u00dfend auf die Vorteile dieser neuesten Version im Vergleich zu fr\u00fcheren Versionen ein.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Was ist Angular?<\/strong><\/h2>\n\n\n\n<p><strong>Angular ist ein von Google entwickeltes Web-Framework, mit dem sich moderne, schnelle und skalierbare Anwendungen erstellen lassen.<\/strong> Es bietet eine robuste Architektur, integrierte Werkzeuge (wie Routing, Formulare, Services und Testing) sowie einen komponentenbasierten Ansatz. Es wurde insbesondere f\u00fcr mittelgro\u00dfe und gro\u00dfe Projekte konzipiert, bei denen Organisation, Wartbarkeit und Skalierbarkeit des Codes entscheidend sind.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"304\" src=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-logo-ES.webp\" alt=\"Angular-Logo mit einem stilisierten, schildf\u00f6rmigen Buchstaben 'A' in einem Rot-Pink-Farbverlauf, neben dem Wort 'Angular' in einer Schrift mit Pink-Lila-Farbverlauf.\" class=\"wp-image-16134\" srcset=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-logo-ES.webp 977w, https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-logo-ES-300x93.webp 300w, https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-logo-ES-768x239.webp 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/figure>\n\n\n\n<p><strong>Welche Vorteile bringt Angular 21?<\/strong><\/p>\n\n\n\n<p>Zu den wichtigsten Vorteilen z\u00e4hlen die folgenden:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Signal Forms (experimentell):<\/strong> eine neue formularbezogene API auf Basis von Signals. Sie erm\u00f6glicht es, den Zustand des Formulars als Signal zu definieren, wobei Angular automatisch Felder, Validierungen, den \u201edirty\/touched\u201c-Status usw. synchronisiert. Dadurch wird die Formularlogik erheblich vereinfacht.<\/li>\n\n\n\n<li><strong>Angular ARIA: Barrierefreiheit und \u201eheadless\u201c-Komponenten:<\/strong> eine Bibliothek mit UI-Primitiven (Accordions, Men\u00fcs, Listen, Comboboxen usw.), die sich auf Barrierefreiheit konzentriert und keine festen Styles vorgibt \u2014 was Designflexibilit\u00e4t bei gleichzeitig guter ARIA-Unterst\u00fctzung erm\u00f6glicht.<\/li>\n\n\n\n<li><strong>Angular MCP Server:<\/strong> native Integration mit KI-Agenten, sodass diese direkt mit Framework-Tools interagieren k\u00f6nnen, um Code zu generieren, Analysen durchzuf\u00fchren, Aufgaben zu automatisieren und von Beginn an bei der Entwicklung zu unterst\u00fctzen.<\/li>\n\n\n\n<li><strong>Neue Standard-Testumgebung:<\/strong> <strong>Vitest<\/strong> ersetzt Karma\/Jasmine. Das erm\u00f6glicht schnellere Tests, Kompatibilit\u00e4t mit modernen APIs und eine leichtere, zeitgem\u00e4\u00dfe Testing-Erfahrung.<\/li>\n\n\n\n<li><strong>Reaktive Change Detection:<\/strong> Angular ist standardm\u00e4\u00dfig nicht mehr von zone.js abh\u00e4ngig und nutzt stattdessen explizite Reaktivit\u00e4t mit Signals. Das f\u00fchrt zu schnelleren UI-Updates, geringerer Laufzeitbelastung, kleineren Bundles und effizienterer Ausf\u00fchrung.<\/li>\n<\/ol>\n\n\n\n<p><strong>1. Signal Forms: eine neue \u00c4ra f\u00fcr das Formularmanagement in Angular<\/strong><\/p>\n\n\n\n<p>Angular f\u00fchrt Signal Forms im experimentellen Modus ein \u2014 ein Ansatz, der die Arbeit mit Formularen grundlegend neu definiert. Diese neue API, aufgebaut auf Signals, bietet eine deutlich <strong>reaktivere, skalierbarere und besser komponierbare<\/strong> Entwicklungsweise.<\/p>\n\n\n\n<p>Anstatt verstreute Zust\u00e4nde, manuelle Subscriptions oder komplexe Strukturen zu verwalten, erm\u00f6glichen Signal Forms, dass Formularzustand, Validierungen und Werte automatisch auf Basis deklarativer Signals aktualisiert werden.<\/p>\n\n\n\n<p>Das Ergebnis ist ein intuitiveres, wartungsfreundlicheres und deutlich vorhersehbareres Modell \u2014 ideal f\u00fcr Anwendungen mit komplexen oder umfangreichen Formularen. F\u00fcr Entwicklungsteams bedeutet das <strong>weniger Code, weniger Fehler und eine h\u00f6here Entwicklungsgeschwindigkeit.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">import { form, Field } from '@angular\/forms\/signals';<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">@Component({<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; imports: [Field],<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; template: `<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp;&nbsp;&nbsp; Email: &lt;input [field]=\"loginForm.email\"&gt;<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp;&nbsp;&nbsp; Password: &lt;input [field]=\"loginForm.password\"&gt;<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; `<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">})<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">export class LoginForm {<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; login = signal({<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp;&nbsp;&nbsp; email: '',<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp;&nbsp;&nbsp; password: ''<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; });<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp; <\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">&nbsp;&nbsp;loginForm = form(this.login);<\/pre>\n\n\n\n<pre class=\"wp-block-preformatted\">}<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>2. Angular Aria: erweiterte Barrierefreiheit mit \u201eheadless\u201c-Komponenten<\/strong><\/p>\n\n\n\n<p>Mit Angular Aria im Developer Preview f\u00fchrt das Framework eine neue <strong>Sammlung von Headless-Komponenten ein, bei denen Barrierefreiheit im Mittelpunkt steht<\/strong>. Diese Komponenten \u2014 wie Men\u00fcs, Listen oder Comboboxen \u2014 bieten vollst\u00e4ndige interne Logik und ARIA-Kompatibilit\u00e4t, ohne visuelle Strukturen oder Styles vorzuschreiben.<\/p>\n\n\n\n<p>Das bedeutet, dass Teams zug\u00e4ngliche, robuste und vollst\u00e4ndig individualisierbare Benutzeroberfl\u00e4chen erstellen k\u00f6nnen, ohne bei jedem Projekt bei null beginnen zu m\u00fcssen. Angular Aria sorgt f\u00fcr Konsistenz und Zuverl\u00e4ssigkeit, insbesondere bei Produkten, die regulatorische Anforderungen erf\u00fcllen oder inklusive Nutzererlebnisse bereits im Design ber\u00fccksichtigen sollen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"881\" src=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-1-ES.webp\" alt=\"Screenshot eines Angular Standalone-Men\u00fc-Beispiels mit einem Sicherheits- und Hilfe-Navigationsmen\u00fc. Der Bereich 'Sicherheit' enth\u00e4lt Optionen zum 'Passwort \u00e4ndern', zur 'Zwei-Faktor-Authentifizierung' und zum 'Zur\u00fccksetzen'. Die Option 'Zur\u00fccksetzen' ist ausgeklappt und zeigt ein Untermen\u00fc mit 'E-Mail-Adresse' (hervorgehoben), 'Telefonnummer' und 'Passwort'. Der Hilfe-Bereich umfasst 'Support', 'Feedback' und 'Abmelden'.\" class=\"wp-image-16140\" srcset=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-1-ES.webp 977w, https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-1-ES-300x271.webp 300w, https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-1-ES-768x693.webp 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/figure>\n\n\n\n<p><strong>3. Angular MCP Server: native Integration mit KI-Agenten<\/strong><\/p>\n\n\n\n<p>Mit dem <strong>MCP Server<\/strong> geht Angular einen klaren Schritt in Richtung Zukunft. Dieser umfasst nun sieben stabile und experimentelle Tools, die es KI-Agenten \u2014 einschlie\u00dflich LLMs \u2014 erm\u00f6glichen, direkt mit Angular-Projekten zu interagieren.<\/p>\n\n\n\n<p>Dadurch entstehen neue M\u00f6glichkeiten wie Code-Generierung, Refactoring, Diagnosen, Routen-Analyse, automatische Signal-Integration oder Verbesserungen der Barrierefreiheit \u2014 alles unterst\u00fctzt durch KI-gest\u00fctzte Werkzeuge.<\/p>\n\n\n\n<p>Der Vorteil liegt auf der Hand: Teams k\u00f6nnen repetitive Aufgaben beschleunigen, intelligente Unterst\u00fctzung von Anfang an nutzen und ihre Produktivit\u00e4t durch Agenten steigern, die Angular nativ verstehen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"610\" src=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-2-ES.webp\" alt=\"Screenshot einer dunkel gestalteten Terminal-Oberfl\u00e4che, die eine KI-gest\u00fctzte Programmiersitzung mit Gemini 2.5 Pro zeigt. Die KI-Nachricht lautet: 'Okay, meine Analyse ist abgeschlossen. Es sieht so aus, als w\u00fcrden wir mit einem neuen Projekt beginnen. Das ist gro\u00dfartig! Wir werden die Smart Recipe Box-Anwendung entwickeln und ganz am Anfang unserer Reise beginnen. Zuerst, um dieses Tutorial perfekt auf Sie zuzuschneiden: K\u00f6nnten Sie mir Ihr Erfahrungsniveau in der Webentwicklung auf einer Skala von 1 bis 10 nennen? (1 als absoluter Anf\u00e4nger, 10 als erfahrener Experte).' Die Statusleiste zeigt, dass das Projekt in einem tutor-project-Verzeichnis mit 1 MCP-Server und ohne aktivierte Sandbox l\u00e4uft.\" class=\"wp-image-16145\" srcset=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-2-ES.webp 977w, https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-2-ES-300x187.webp 300w, https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-2-ES-768x480.webp 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/figure>\n\n\n\n<p><strong>4. Vitest als Standard-Test-Runner: Geschwindigkeit und Modernit\u00e4t<\/strong><\/p>\n\n\n\n<p>Die Angular CLI integriert <strong>Vitest als neuen Standard-Test-Runner<\/strong> \u2014 eine in der Community lang erwartete Ver\u00e4nderung. Vitest bietet eine moderne, schnelle Testumgebung mit Unterst\u00fctzung aktueller APIs und ersetzt das traditionelle Karma-Setup.<\/p>\n\n\n\n<p>Zu den Vorteilen geh\u00f6ren eine <strong>sehr schnelle Ausf\u00fchrung<\/strong>, Kompatibilit\u00e4t mit modernen Tools im \u00d6kosystem sowie eine einfache Konfiguration und Durchf\u00fchrung von Unit-Tests. F\u00fcr Teams bedeutet das einen schnelleren Feedback-Zyklus und eine zeitgem\u00e4\u00dfe Testing-Erfahrung.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"331\" src=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-3.png\" alt=\"Screenshot eines dunkel gestalteten Terminals, das die Ergebnisse des Befehls 'ng test' in einem Angular-Projekt zeigt. Drei Tests wurden f\u00fcr die AppComponent erfolgreich bestanden: 'should create the app', 'should have as title my-app' und 'should render title', alle in der Datei src\/app\/app.component.spec.ts. Die Zusammenfassung zeigt 1 bestandene Testdatei mit insgesamt 3 Tests, gestartet um 18:18:01 mit einer Gesamtdauer von 2,46 Sekunden (Transform 615ms, Setup 2ms, Collect 2,21s, Tests 5ms).\" class=\"wp-image-16151\" srcset=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-3.png 977w, https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-3-300x102.png 300w, https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-3-768x260.png 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/figure>\n\n\n\n<p><strong>5. Kein zone.js mehr in neuen Projekten: einfachere und effizientere Reaktivit\u00e4t<\/strong><\/p>\n\n\n\n<p>Mit Angular 21 enthalten neue Anwendungen standardm\u00e4\u00dfig kein zone.js mehr. Dies ist einer der wichtigsten Schritte in der Weiterentwicklung des Frameworks.<\/p>\n\n\n\n<p>Dank Signals und dem neuen Reaktivit\u00e4tssystem kann Angular UI-Updates verwalten, ohne auf die traditionelle zonenbasierte Change Detection angewiesen zu sein. Das f\u00fchrt zu:<\/p>\n\n\n\n<p>\u2022 besserer Gesamtperformance<br>\u2022 geringerer Bundle-Gr\u00f6\u00dfe<br>\u2022 weniger Laufzeit-Overhead<br>\u2022 einem klareren und vorhersehbareren mentalen Modell<\/p>\n\n\n\n<p>F\u00fcr Entwickler:innen bedeutet das ein moderneres und effizienteres Angular, bei dem historische Komplexit\u00e4t reduziert wird.<\/p>\n\n\n\n<p><strong>Welche Vorteile ergeben sich aus Angular 21 f\u00fcr unsere Kunden?<\/strong><\/p>\n\n\n\n<p>F\u00fcr ein Softwareunternehmen wie WATA Factory k\u00f6nnen die Vorteile der Einf\u00fchrung von Angular 21 zu konkreten gesch\u00e4ftlichen Mehrwerten f\u00fchren:<\/p>\n\n\n\n<p>\u2022 <strong>Reduzierung von Entwicklungs- und Wartungskosten:<\/strong> weniger wiederholter Code, einfachere Formulare, bessere Zustandsverwaltung und weniger Bugs \u2192 geringerer Entwicklungsaufwand und weniger technische Schulden langfristig.<\/p>\n\n\n\n<p>\u2022 <strong>Steigerung der Liefergeschwindigkeit:<\/strong> die vereinfachte Erstellung neuer Projekte, der schnelle Start, der Einsatz von Vitest und die signalbasierte Reaktivit\u00e4t erm\u00f6glichen es Teams, neue Funktionen oder Verbesserungen schneller bereitzustellen.<\/p>\n\n\n\n<p>\u2022 <strong>Optimiertere Frontend-Produkte:<\/strong> kleinere Bundles und verbesserte Performance \u2014 ideal f\u00fcr Kunden, die effiziente, schnelle Anwendungen mit guter SEO-Performance und Barrierefreiheit ben\u00f6tigen. Das kann die Zufriedenheit der Endnutzer erh\u00f6hen.<\/p>\n\n\n\n<p>\u2022 <strong>Skalierbarkeit und technologische Zukunftssicherheit:<\/strong> die Nutzung der neuesten Angular-Version stellt sicher, dass die technische Basis zukunftsf\u00e4hig bleibt und das Risiko technologischer Veralterung reduziert wird.<\/p>\n\n\n\n<p>\u2022 <strong>Bessere Arbeitsorganisation und Codequalit\u00e4t:<\/strong> moderne Testing-Tools, eine vorhersehbarere Architektur und Unterst\u00fctzung bew\u00e4hrter Praktiken helfen dabei, hohe Qualit\u00e4tsstandards zu halten \u2014 auch wenn mehrere Entwickler:innen parallel an unterschiedlichen Projekten arbeiten.<\/p>\n\n\n\n<p>Bei WATA Factory pr\u00fcfen wir jede neue Angular-Version, weil wir \u00fcberzeugt sind, dass dieses Framework eine solide, moderne und produktive Grundlage f\u00fcr unsere t\u00e4glichen Projekte bietet. Aktuell zu bleiben bedeutet f\u00fcr uns, kontinuierliche Verbesserungen in Performance, Sicherheit und Effizienz zu nutzen und sicherzustellen, dass unsere Entwicklungen wettbewerbsf\u00e4hig und marktgerecht bleiben.<\/p>\n\n\n\n<p><strong>Wann ist eine Migration auf Angular 21 sinnvoll?<\/strong><\/p>\n\n\n\n<p>Eine Migration auf Angular 21 ist sinnvoll, wenn ein Projekt seine Performance verbessern, seine Architektur vereinfachen und moderne Funktionen im Bereich Reaktivit\u00e4t, Testing und Optimierung nutzen m\u00f6chte.<\/p>\n\n\n\n<p>Wenn eine Anwendung bereits auf einer aktuellen Version (Angular 15+) basiert, verl\u00e4uft die Migration in der Regel reibungslos und erm\u00f6glicht den Zugriff auf wichtige Verbesserungen wie Signals, zone.js-freie Change Detection, das neue Formularsystem und Vitest als Testumgebung.<\/p>\n\n\n\n<p>Eine Migration ist au\u00dferdem empfehlenswert, wenn technische Schulden reduziert, Entwicklungsprozesse beschleunigt oder Projekte an aktuelle Best Practices angepasst werden sollen. F\u00fcr langfristige, gesch\u00e4ftskritische Anwendungen mit aktivem Roadmap stellt Angular 21 Nachhaltigkeit, zuk\u00fcnftige Kompatibilit\u00e4t sowie kontinuierliche Sicherheits- und Performance-Updates sicher.<\/p>\n\n\n\n<p>Bei sehr alten oder nicht gewarteten Projekten kann es sinnvoll sein, eine schrittweise Migration zu planen oder eine teilweise Neuentwicklung in Betracht zu ziehen, um gro\u00dfe Versionsspr\u00fcnge zu vermeiden.<\/p>\n\n\n\n<p><strong>Fazit<\/strong><\/p>\n\n\n\n<p>Angular 21 verleiht dem Framework neuen Schwung: Es kombiniert technische Modernisierung, verbesserte Performance, eine optimierte Entwicklererfahrung und neue M\u00f6glichkeiten zur Erstellung wartbarer und barrierefreier Anwendungen.<\/p>\n\n\n\n<p>F\u00fcr ein Entwicklungsunternehmen wie WATA Factory stellt dies eine klare <strong>Chance<\/strong> dar. Die Einf\u00fchrung von Angular 21 kann zu <strong>h\u00f6herer Effizienz, besserer Qualit\u00e4t, schnellerer Umsetzung und nachhaltigerem Code<\/strong> f\u00fchren. In vielen F\u00e4llen bedeutet es einen qualitativen und wettbewerblichen Fortschritt im Vergleich zu \u00e4lteren Versionen.<\/p>\n\n\n\n<p>Bei WATA Factory evaluieren wir jede neue Angular-Version, weil wir \u00fcberzeugt sind, dass das Framework unseren t\u00e4glichen Projekten gro\u00dfen Mehrwert bietet. Seine Stabilit\u00e4t, sein strukturierter Ansatz und seine Skalierbarkeit erm\u00f6glichen es uns, zuverl\u00e4ssige, wartbare und effiziente L\u00f6sungen zu entwickeln. Mit den technologischen Entwicklungen Schritt zu halten hilft uns, bessere Ergebnisse f\u00fcr unsere Kunden zu erzielen und sicherzustellen, dass unsere Anwendungen auf einer modernen und robusten technologischen Grundlage aufgebaut sind.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"977\" height=\"741\" src=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-4-ES.webp\" alt=\"Angulars offizielles Maskottchen, eine freundliche Zeichentrickfigur mit einem roten geometrischen schildf\u00f6rmigen K\u00f6rper, die rote Handschuhe und Stiefel tr\u00e4gt. Die Figur hat ein niedliches, l\u00e4chelndes Gesicht mit roten Wangen und winkt mit der rechten Hand, auf der das Angular-Logo zu sehen ist \u2014 ein wei\u00dfes Schild mit dem roten Buchstaben 'A'.\" class=\"wp-image-16157\" srcset=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-4-ES.webp 977w, https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-4-ES-300x228.webp 300w, https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-image-4-ES-768x582.webp 768w\" sizes=\"auto, (max-width: 977px) 100vw, 977px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Angular bleibt eines der solidesten, umfassendsten und relevantesten Frameworks auf dem Markt, insbesondere im Unternehmensumfeld und bei gro\u00df angelegten Projekten. Mit Version 21 (ver\u00f6ffentlicht Ende November 2025) f\u00fchrt Angular mehrere wichtige Neuerungen f\u00fcr Entwickler:innen und Teams ein. Zu den wichtigsten Highlights z\u00e4hlen: In diesem Artikel erkl\u00e4ren wir zun\u00e4chst einfach, was Angular ist, und gehen anschlie\u00dfend [&hellip;]<\/p>\n","protected":false},"author":42,"featured_media":16117,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[68,367],"tags":[],"class_list":["post-16120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-neuigkeiten","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest - WATA Factory<\/title>\n<meta name=\"description\" content=\"Entdecken Sie die Neuerungen in Angular 21: Signals, Reaktivit\u00e4t ohne zone.js, Tests mit Vitest, Accessibility-Verbesserungen und Einfluss auf moderne Webentwicklung.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wata.es\/?p=16112\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest - WATA Factory\" \/>\n<meta property=\"og:description\" content=\"Entdecken Sie die Neuerungen in Angular 21: Signals, Reaktivit\u00e4t ohne zone.js, Tests mit Vitest, Accessibility-Verbesserungen und Einfluss auf moderne Webentwicklung.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wata.es\/?p=16112\" \/>\n<meta property=\"og:site_name\" content=\"WATA Factory\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/watafactory\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-16T08:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-Gets-a-Refresh-What-You-Need-to-Know-About-Version-21-scaled.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Juan Castillo Diaz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@watafactory\" \/>\n<meta name=\"twitter:site\" content=\"@watafactory\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Castillo Diaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wata.es\\\/?p=16112#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wata.es\\\/?p=16112\"},\"author\":{\"name\":\"Juan Castillo Diaz\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/person\\\/4cfe3a1b4c16256c515d39315fc03450\"},\"headline\":\"Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest\",\"datePublished\":\"2026-03-16T08:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wata.es\\\/?p=16112\"},\"wordCount\":1321,\"publisher\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/?p=16112#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Angular-Gets-a-Refresh-What-You-Need-to-Know-About-Version-21-scaled.webp\",\"articleSection\":[\"Neuigkeiten\",\"Technology\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wata.es\\\/?p=16112\",\"url\":\"https:\\\/\\\/wata.es\\\/?p=16112\",\"name\":\"Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest - WATA Factory\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wata.es\\\/?p=16112#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/?p=16112#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Angular-Gets-a-Refresh-What-You-Need-to-Know-About-Version-21-scaled.webp\",\"datePublished\":\"2026-03-16T08:00:00+00:00\",\"description\":\"Entdecken Sie die Neuerungen in Angular 21: Signals, Reaktivit\u00e4t ohne zone.js, Tests mit Vitest, Accessibility-Verbesserungen und Einfluss auf moderne Webentwicklung.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wata.es\\\/?p=16112#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wata.es\\\/?p=16112\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/wata.es\\\/?p=16112#primaryimage\",\"url\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Angular-Gets-a-Refresh-What-You-Need-to-Know-About-Version-21-scaled.webp\",\"contentUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/Angular-Gets-a-Refresh-What-You-Need-to-Know-About-Version-21-scaled.webp\",\"width\":2560,\"height\":1440,\"caption\":\"Ilustraci\u00f3n vectorial de arquitectura de aplicaci\u00f3n web con flujo de datos reactivo, componentes frontend y anal\u00edtica, representando desarrollo moderno con frameworks como Angular.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wata.es\\\/?p=16112#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wata.es\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wata.es\\\/#website\",\"url\":\"https:\\\/\\\/wata.es\\\/\",\"name\":\"WATA Factory\",\"description\":\"IT Consulting &amp; Outsourcing for your company\",\"publisher\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wata.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\",\"name\":\"WATA Factory\",\"url\":\"https:\\\/\\\/wata.es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logowata.png\",\"contentUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logowata.png\",\"width\":688,\"height\":176,\"caption\":\"WATA Factory\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/watafactory\\\/\",\"https:\\\/\\\/x.com\\\/watafactory\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wata\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/person\\\/4cfe3a1b4c16256c515d39315fc03450\",\"name\":\"Juan Castillo Diaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g\",\"caption\":\"Juan Castillo Diaz\"},\"url\":\"https:\\\/\\\/wata.es\\\/de\\\/author\\\/juancastillo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest - WATA Factory","description":"Entdecken Sie die Neuerungen in Angular 21: Signals, Reaktivit\u00e4t ohne zone.js, Tests mit Vitest, Accessibility-Verbesserungen und Einfluss auf moderne Webentwicklung.","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:\/\/wata.es\/?p=16112","og_locale":"de_DE","og_type":"article","og_title":"Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest - WATA Factory","og_description":"Entdecken Sie die Neuerungen in Angular 21: Signals, Reaktivit\u00e4t ohne zone.js, Tests mit Vitest, Accessibility-Verbesserungen und Einfluss auf moderne Webentwicklung.","og_url":"https:\/\/wata.es\/?p=16112","og_site_name":"WATA Factory","article_publisher":"https:\/\/www.facebook.com\/watafactory\/","article_published_time":"2026-03-16T08:00:00+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-Gets-a-Refresh-What-You-Need-to-Know-About-Version-21-scaled.webp","type":"image\/webp"}],"author":"Juan Castillo Diaz","twitter_card":"summary_large_image","twitter_creator":"@watafactory","twitter_site":"@watafactory","twitter_misc":{"Verfasst von":"Juan Castillo Diaz","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wata.es\/?p=16112#article","isPartOf":{"@id":"https:\/\/wata.es\/?p=16112"},"author":{"name":"Juan Castillo Diaz","@id":"https:\/\/wata.es\/#\/schema\/person\/4cfe3a1b4c16256c515d39315fc03450"},"headline":"Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest","datePublished":"2026-03-16T08:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/wata.es\/?p=16112"},"wordCount":1321,"publisher":{"@id":"https:\/\/wata.es\/#organization"},"image":{"@id":"https:\/\/wata.es\/?p=16112#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-Gets-a-Refresh-What-You-Need-to-Know-About-Version-21-scaled.webp","articleSection":["Neuigkeiten","Technology"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/wata.es\/?p=16112","url":"https:\/\/wata.es\/?p=16112","name":"Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest - WATA Factory","isPartOf":{"@id":"https:\/\/wata.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wata.es\/?p=16112#primaryimage"},"image":{"@id":"https:\/\/wata.es\/?p=16112#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-Gets-a-Refresh-What-You-Need-to-Know-About-Version-21-scaled.webp","datePublished":"2026-03-16T08:00:00+00:00","description":"Entdecken Sie die Neuerungen in Angular 21: Signals, Reaktivit\u00e4t ohne zone.js, Tests mit Vitest, Accessibility-Verbesserungen und Einfluss auf moderne Webentwicklung.","breadcrumb":{"@id":"https:\/\/wata.es\/?p=16112#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wata.es\/?p=16112"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wata.es\/?p=16112#primaryimage","url":"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-Gets-a-Refresh-What-You-Need-to-Know-About-Version-21-scaled.webp","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2026\/07\/Angular-Gets-a-Refresh-What-You-Need-to-Know-About-Version-21-scaled.webp","width":2560,"height":1440,"caption":"Ilustraci\u00f3n vectorial de arquitectura de aplicaci\u00f3n web con flujo de datos reactivo, componentes frontend y anal\u00edtica, representando desarrollo moderno con frameworks como Angular."},{"@type":"BreadcrumbList","@id":"https:\/\/wata.es\/?p=16112#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wata.es\/de\/"},{"@type":"ListItem","position":2,"name":"Angular erneuert sich: Die Verbesserungen in Version 21, die du kennen solltest"}]},{"@type":"WebSite","@id":"https:\/\/wata.es\/#website","url":"https:\/\/wata.es\/","name":"WATA Factory","description":"IT Consulting &amp; Outsourcing for your company","publisher":{"@id":"https:\/\/wata.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wata.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/wata.es\/#organization","name":"WATA Factory","url":"https:\/\/wata.es\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/","url":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","width":688,"height":176,"caption":"WATA Factory"},"image":{"@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/watafactory\/","https:\/\/x.com\/watafactory","https:\/\/www.linkedin.com\/company\/wata\/"]},{"@type":"Person","@id":"https:\/\/wata.es\/#\/schema\/person\/4cfe3a1b4c16256c515d39315fc03450","name":"Juan Castillo Diaz","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g","caption":"Juan Castillo Diaz"},"url":"https:\/\/wata.es\/de\/author\/juancastillo\/"}]}},"_links":{"self":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts\/16120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/comments?post=16120"}],"version-history":[{"count":5,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts\/16120\/revisions"}],"predecessor-version":[{"id":16182,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts\/16120\/revisions\/16182"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/media\/16117"}],"wp:attachment":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/media?parent=16120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/categories?post=16120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/tags?post=16120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}