Google AI Studio unterstützt jetzt die Generierung von Angular-Anwendungen. Diese Zusammenarbeit zielt darauf ab, die KI-Leistung von Gemini der Angular-Entwickler-Community zugänglich zu machen. Entwickler können über den Tab "Build" im AI Studio kostenlos auf diese Funktion zugreifen. Um Angular-Code zu generieren, müssen Benutzer zuerst die Framework-Vorlage "Angular (TypeScript)" in den erweiterten Einstellungen auswählen. Nach der Auswahl der Vorlage können Benutzer Prompts für ihre gewünschte Anwendung eingeben. Gemini generiert dann die Angular-Anwendung basierend auf dem bereitgestellten Prompt. Diese Integration beschleunigt die Prototypenentwicklung und die Anwendungsentwicklung erheblich und reduziert die anfänglichen Zeitpläne von Wochen auf Tage. Neben der Code-Generierung ermöglicht AI Studio auch die Erstellung von KI-gestützten Apps, die die Gemini API nutzen. Die generierten Anwendungen können einfach zu Cloud Run für eine serverlose Umgebung bereitgestellt werden. Code kann auch nach GitHub exportiert werden, um Versionskontrolle und Zusammenarbeit zu ermöglichen. Das Teilen von generierten Anwendungen für Feedback und Proof of Concept wird ebenfalls vereinfacht. Entwickler werden ermutigt, diese neue Funktion unter goo.gle/angular-ai-studio auszuprobieren und ihre Kreationen unter #AngularInAIStudio zu teilen.

Das Angular-Team hat das Web Codegen Scorer-Tool eingeführt, um die KI-gestützte Webcode-Generierung zu verbessern. Dieses Tool hilft bei der Optimierung von LLMs für den aktuellen Framework-Zustand von Angular und unterstützt die Integration sich entwickelnder Anwendungsfunktionen. Es hilft bei der Analyse und Fehlerbehebung gängiger LLM-Fehler und ermöglicht eine schnellere Iteration von Verbesserungen. Der Web Codegen Scorer wurde in Zusammenarbeit mit KI-, Sicherheits- und Barrierefreiheits-Experten für eine robuste Evaluierung entwickelt. Angular hat auch mit dem SolidJS-Team zusammengearbeitet, was das Potenzial des Tools zur Verbesserung der Code-Generierung für andere Frameworks zeigt. Das Tool ist Open Source, um Community-Beiträge und eine breitere Framework-Adaption zu fördern. Angular v20.2 enthält den Angular MCP Server, der Coding-Agenten mit integrierten Tools für Entwicklungssitzungen zur Verfügung stellt. Zukünftige MCP-Server-Funktionen umfassen Modernisierungstools für die Syntaxmigration und eine lokale RAG-Engine für aktuelle KI-Informationen. Angular-Unterstützung wurde in Googles KI-Produkte Gemini Canvas und Google AI Studio integriert. Das Team erforscht auch ein KI-first-Framework, das sich auf Agentenfunktionen für große Codebasen konzentriert und gängige LLM-Probleme minimiert. Sie experimentieren mit Autorenschaftsformaten und Anwendungsstrukturen und versprechen Transparenz bei zukünftigen Angular-Entwicklungen. Das Angular-Team engagiert sich dafür, Entwickler beim Erstellen skalierbarer, KI-gestützter Anwendungen zu unterstützen.

Angular hat Minor-Updates v20.1 und v20.2 veröffentlicht, die sich auf die Produktivität der Entwickler und KI-Verbesserungen konzentrieren. Ein wichtiges Highlight ist die Produktionsreife von zoneless Angular, die Vorteile wie kleinere Bundle-Größen und verbesserte Debugging-Funktionen bietet. Neue Animationsprimitiven, animate.enter und animate.leave, ermöglichen eine einfachere Integration nativer CSS-Animationen und veraltet das alte @angular/animations-Paket. Das Team erweitert sein KI-Angebot mit Leitfäden zum Erstellen KI-gestützter Apps und zur Verbesserung von KI-gestützten Codierungswerkzeugen. Sie arbeiten auch an einem experimentellen MCP-Server zur Unterstützung von KI-Anforderungen wie Dokumentationssuche und Best Practices für LLMs. Angular DevTools enthält jetzt Routenvisualisierung und Signaldiagramme für besseres Debugging. Komponententests wurden durch die Unterstützung der Übergabe von Binding-Objekten an TestBed.createComponent vereinfacht. Die Mat Menu-Komponente kann jetzt als Kontextmenü fungieren, und NgComponentOutlet unterstützt benutzerdefinierte EnvironmentInjectors für dynamische Komponenten. Weitere Verbesserungen umfassen einen überarbeiteten Routing-Leitfaden, ein neues currentNavigation-Signal, eine destroyed-Eigenschaft auf DestroyRef und eine bessere Unterstützung für Template-Operatoren und ARIA-Attribute. Angular unterstützt nun TypeScript 5.9 und hat Verbesserungen an httpResource und httpClient vorgenommen. Die Community hat erhebliches Feedback für das neue Angular-Maskottchen gegeben, dessen endgültiges Design später in diesem Jahr bekannt gegeben wird.

Die Angular- und Chrome-Teams haben zusammengearbeitet, um Angular-spezifische Daten und Erkenntnisse direkt in das Leistungs-Panel der Chrome-Entwickler-Tools zu integrieren, was eine einheitliche Profilerfahrung für Entwickler schafft. Diese Integration ermöglicht es Entwicklern, die Vorteile beider Tools zu kombinieren und bietet eine synchronisierte und umfassendere Ansicht der Leistung ihrer Anwendung. Die neue benutzerdefinierte Spur für Angular in Chrome-Entwickler-Tools bietet Leistungsdaten unter Verwendung von Angular-Konzepten wie Anwendungs-Bootstrap, Komponenten, UI-Synchronisation und Lebenszyklus-Hooks. Die benutzerdefinierte Spur gruppiert Funktionsaufrufe zusammen unter entsprechenden Komponenten und anderen Angular-Konzepten, damit Entwickler bis zu einzelnen Funktionen herunterzoomen können, um eine feinere Ansicht zu erhalten. Die Einträge in der Flammen-Diagramm sind farbcodiert, um Entwicklern zu helfen, schnell zu erkennen, was in ihrer Anwendung passiert, und zwischen Anwendungscode, anderen Skripten oder Browser-Aktivitäten zu unterscheiden. Die Farben repräsentieren verschiedene Aspekte der Anwendung, wie Abhängigkeits-Injektion-Dienste, von Angular kompilierte Vorlagen und Einstiegspunkte. Die benutzerdefinierte Spur ist interaktiv, so dass Entwickler auf einen Eintrag in der Flammen-Diagramm klicken können, um weitere detaillierte Informationen über einen bestimmten Eintrag zu erhalten. Um loszulegen, müssen Entwickler sicherstellen, dass sie die neueste Version von Angular und eine aktuelle Version von Chrome verwenden, ihre Angular-Anwendung im Entwickler-Modus ausführen und die benutzerdefinierte Spur durch Eingabe von ng.enableProfiling() in der Konsole aktivieren. Diese Integration demonstriert das laufende Engagement für die Verbesserung der Entwicklererfahrung innerhalb des Angular-Ökosystems, indem Entwicklern geholfen wird, schnellere, effizientere Anwendungen zu bauen.

Angular hat in den letzten Jahren bedeutende Fortschritte gemacht, darunter Reaktivität mit Signals und zonelose Anwendungen. Die neueste Version, Angular v20, konzentriert sich auf die Optimierung von Funktionen, die sich noch in der Entwicklung befinden, um eine solide Entwicklererfahrung zu bieten. Die Veröffentlichung stabilisiert APIs wie effect, linkedSignal und toSignal und führt zoneless als Developer Preview ein. Außerdem verbessert sie das Debugging mit den Angular DevTools und arbeitet mit Chrome zusammen, um benutzerdefinierte Angular-Berichte direkt in den Chrome DevTools zu erstellen. Die Version verbessert die Entwicklererfahrung durch Aktualisierungen der Styleguides, Typenprüfung und Unterstützung für den Language Service. Darüber hinaus fördert sie die Entwicklung von GenAI und startet eine Anfrage nach Kommentaren für ein offizielles Maskottchen für Angular. Die Veröffentlichung befördert Reaktivitäts-Funktionen in den stabilen Zustand, einschließlich Signal, computed, input und view queries APIs. Sie führt auch experimentelle APIs ein, darunter die resource API und httpResource, um die Verwaltung von asynchronem Zustand mit Angular anzugehen. Des Weiteren wird zoneless zur Developer Preview befördert und Angular auf dem Server mit inkrementeller Hydratisierung und Konfiguration des Render-Modus auf Routen-Ebene gefestigt. Schließlich wird die Entwicklererfahrung mit Performance-Einblicken in den Chrome DevTools und durch Framework-Ergänzungen und -Verbesserungen optimiert.

"Genkit 1.0, ein Framework für die Entwicklung von KI-Anwendungen, ist jetzt für Node.js und Go verfügbar und ermöglicht produktionsreife KI-Integrationen. Es ist für die serverseitige Nutzung konzipiert und bietet Open-Source-Bibliotheken und Entwickler-Tools. Angular-Entwickler können Genkit über ein Node.js-Backend nutzen und die APIs von Genkit in ihren serverseitigen Code integrieren. Ein einfaches Beispiel zeigt, wie man sich mit einem Modell wie Gemini 2.0 Flash verbindet und Text generiert. Für eine verbesserte Benutzererfahrung ermöglicht die streamFlow API von Genkit das Streaming von Antworten und erzeugt so einen "KI-tippt"-Effekt. Serverseitige Flows werden mit der defineFlow API von Genkit und strukturierten Antworten mit Zod-Schemas definiert. Die Genkit CLI und die Developer UI bieten Tools zum Testen, Debuggen und Beobachten von KI-Interaktionen. Genkit unterstützt verschiedene Funktionen wie Multi-Turn-Konversationen, Tool-Nutzung und Human-in-the-Loop-Workflows. Durch die Vereinfachung der KI-Integration ermöglicht Genkit Entwicklern, innovative KI-gestützte Webanwendungen mit Angular und Firebase zu erstellen. Weitere Informationen und Updates sind auf angular.dev und firebase.google.com/docs/genkit verfügbar."

Angular führt neue APIs ein, darunter die experimentelle `resource()` API, die es Entwicklern ermöglicht, die Ergebnisse asynchroner Operationen als Signals verfügbar zu machen. Die `httpResource` API baut auf dem `resource` Primitive auf und verwendet `HttpClient` als Loader, wodurch HTTP-Anfragen vereinfacht werden. `httpResource` fungiert als Frontend für `@angular/common/http` und führt HTTP-Anfragen über den Angular HTTP-Stack aus, einschließlich Interceptors. Standardmäßig führt ein `httpResource` eine GET-Anfrage aus und gibt eine unbekannt typisierte JSON-Antwort zurück. Es unterscheidet sich von `HttpClient`, da es die Anfrage sofort initiiert, und wenn sich Quellsignale in der Anfrageberechnung ändern, wird eine neue HTTP-Anfrage gestellt. `httpResource` ermöglicht erweiterte Anfragen durch die Definition eines Anfrageobjekts, ähnlich wie bei `HttpClient`s `request`. Die API verfügt über dedizierte Methoden für andere Antworttypen, wie Text, Blob und ArrayBuffer. Ein `httpResource` stellt mehrere Signals zur Verfügung, darunter `value`, `status`, `error`, `isLoading`, `headers`, `statusCode` und `progress`. `httpResource` bietet eine direkte Integration mit Schema-Validierungsbibliotheken wie Zod oder Valibot für Typsicherheit. `httpResource` ist als experimentelle API in Angular v19.2 verfügbar und noch nicht produktionsreif, aber Entwickler werden ermutigt, sie auszuprobieren und Feedback zu geben.

Angular hat Version 19.2 veröffentlicht, die neue APIs und experimentelle Funktionen enthält, um die Entwicklungserfahrung zu verbessern. Die Veröffentlichung erweitert die Reaktivität über synchrone Operationen hinaus mit der Einführung asynchroner Reaktivität unter Verwendung der neuen httpResource- und resource-Streaming-APIs mit rxResource. Die Resource-API ermöglicht es Entwicklern, mit asynchronen Datenquellen zu interagieren, während sie die Vorteile von Signalen nutzen. Die httpResource-API bietet eine reaktive, niedrig-reibungslose Methode, um Daten über HTTP abzurufen, die am Reaktivitätssystem von Angular mit Signalen teilnimmt. Die rxResource-API unterstützt jetzt das Streaming mehrerer Antworten, was sie für Szenarien nützlich macht, bei denen mehrere Werte von einem Endpunkt zurückgegeben werden. Angular-Vorlagen wurden auch verbessert, indem sie die Unterstützung für ungetaggte Template-Literal-Ausdrücke hinzugefügt haben, was die Zeichenkettenverkettung und -escapung erleichtert. Weitere Aktualisierungen umfassen neue Migrationen, wie z.B. die Umstellung auf selbstschließende Tags und die Unterstützung des Set-Typs in Formularen. Das Angular-Team bittet um Feedback zur Resource-API durch eine Anfrage nach Kommentaren. Angular v19.2 ist jetzt für Entwickler verfügbar, um aktualisiert und großartige Apps zu erstellen. Neue Entwickler können mit Angular beginnen, indem sie angular.dev/tutorials besuchen.

Unternehmensweite Software-Systeme werden oft von mehreren cross-funktionalen Teams implementiert, und um diese Teams zu ermöglichen, neue Funktionen effizient bereitzustellen, ist es wünschenswert, die Notwendigkeit der Koordination zwischen ihnen zu minimieren. Dies erfordert eine Modularisierung, die das System in niedrig gekoppelte Bereiche aufteilt, die von einzelnen Teams betreut werden können. Micro Frontends ist ein architektonischer Stil, der mehrere Vorteile verspricht, wie z.B. eine hohe Autonomie der Teams, aber auch mit zahlreichen Herausforderungen einhergeht. Micro Frontends ergeben separate Build-Prozesse, die mit inkrementellen Builds kombiniert werden können, um die Build-Zeit zu verbessern. Diese Funktion kann auch ohne die Anwendung anderer Aspekte wie der Ausrichtung von Teams auf individuelle Anwendungen oder separaten Bereitstellungen verwendet werden. Jedoch können individuell entwickelte Micro Frontends in der Benutzeroberfläche/Benutzererfahrung (UI/UX) divergieren, was zu einem inkonsistenten Aussehen führt, und das Laden mehrerer Anwendungen erhöht die Anzahl der zu ladenden Bundles, was die Ladezeiten beeinträchtigt und den Speicherdruck erhöht. Das Aufteilen einer Anwendung in niedrig gekoppelte Teile mag ein Best Practice im Allgemeinen sein, aber es ist oft schwierig, die Grenzen zwischen den Vertikalen klar genug zu definieren, um sie als separate Anwendungen zu implementieren. Die Integration in eine umfassende Lösung bringt zusätzliche Komplexität mit sich, und der Wechsel von einer Compile-Zeit-Integration zu einer Laufzeit-Integration hat schwerwiegende Folgen. Das Angular-Team empfiehlt, zu überprüfen, ob Alternativen wie die Implementierung der einzelnen Vertikalen in Monorepos geeignet sind. Es gibt jedoch auch Möglichkeiten, die Nachteile von Micro Frontends zu kompensieren, wie z.B. die Etablierung eines Design-Systems, um eine konsistente UI/UX zu unterstützen, oder das lazy loading einzelner Systemteile. Native Federation ist ein Community-Projekt, das eine enge Integration mit dem Angular CLI bietet und ermöglicht, Micro Frontends mit Angular zu implementieren. Es ermöglicht einer Anwendung, Teile anderer separat gebauter und bereitgestellter Anwendungen lazy zu laden und kann Abhängigkeiten wie Angular oder RxJS zwischen dem Host und den Remotes teilen. Um Native Federation einzurichten, wird ein Schematic bereitgestellt, das die Native Federation-Builder-Delegation an den ApplicationBuilder konfiguriert und eine Konfigurationsdatei federation.config.js erstellt. Die Konfiguration weist einem Remote oder Host einen eindeutigen Namen zu und definiert, welche Abhängigkeiten geteilt werden sollen. Remotes definieren auch exponierte EcmaScript-Module, die in die Shell geladen werden können. Das Schematic fügt auch Code hinzu, um Native Federation in der main.ts zu initialisieren, und um eine Komponente oder Routing-Konfiguration, die von einem Remote exponiert wird, zu laden, wird traditionelles lazy loading mit der loadRemoteModule-Funktion von Native Federation kombiniert.

Das Angular-Team hat sich in den letzten zweieinhalb Jahren auf die Verbesserung der Entwicklererfahrung und der Leistung konzentriert. Aufgrund der schnelllebigen Technologiebranche definiert das Team eine langfristige Vision und plant die Arbeit auf jährlicher, quartaler und veröffentlichter Basis, um sich an wechselnde Anforderungen anpassen zu können. Das Team verwendet eine jährliche Entwicklerumfrage, um Annahmen über die Bedürfnisse der Entwickler zu überprüfen, bei der 2024 über 10.000 Antworten erhalten wurden. Die Umfrageergebnisse zeigen, dass 79% der Entwickler die letzten beiden Hauptversionen von Angular verwenden und 90% standalone-Komponenten, Direktiven und Pipes nutzen. Die Ergebnisse deuten auch auf eine Verbesserung der allgemeinen Entwicklerzufriedenheit hin, bei der fast 90% der Entwickler mit dem Framework zufrieden sind. Das Team identifizierte Verbesserungen wie standalone-Komponenten, integrierte Steuerungsfluss und aufschiebbare Ansichten als Beiträge zur Zufriedenheitssteigerung. Komponenten-Autoring-Format und Testing bleiben jedoch wichtige Bereiche für Verbesserungen. Im Jahr 2025 wird das Team sich auf Investitionen in Schlüsselbereiche konzentrieren, um Angular-Entwicklern zu helfen, erfolgreich zu sein, einschließlich der Verbesserung der Entwicklererfahrung, der Ermöglichung der Übernahme der neuesten Verbesserungen und der Optimierung für Leistung. Beachtenswerte Projekte für 2025 umfassen die Förderung von zoneless zu einer Entwickler-Vorschau, die Einführung von signalbasierten Formularen und den Austausch von Karma durch einen neuen Standard-Test-Runner. Das Team wird auch die Angular-Dokumentation weiterentwickeln, um die neuesten Best Practices widerzuspiegeln und die Sichtbarkeit von Funktionen zu erhöhen, die Web-Entwicklern helfen, ihre Ziele zu erreichen.

Das Angular-Team hat eine neue Migration eingeführt, um Entwicklern zu helfen, ihre dekoratorbasierten Eingaben auf die neue Signal-API zu aktualisieren. Signal-Eingaben bieten Aktualisierungen der Eingabefunktionalität bei gleichzeitiger Beibehaltung der Funktionsparität mit dekoratorbasierten Eingaben. Einer der Hauptgründe für die Aktualisierung ist die Typsicherheit, die es Entwicklern ermöglicht, brüchige Code-Muster zu entfernen. Signal-Eingaben machen auch die Überwachung von Eingaben einfacher. Die neue API kann verwendet werden, um Code zu refaktorieren, der den ngOnChanges-Lebenszyklus-Hook verwendet, um Aktualisierungen von Eingaben zu verfolgen. Die Migration kann über die Angular-CLI oder als Code-Refaktorierungsaktionen in VSCode durchgeführt werden. Das Tooling wird die @Input-Deklarationen aktualisieren und Verweise auf Eingaben anpassen, falls erforderlich, Variablen einführen. Die Migration ist konfigurierbar und bietet Optionen, um die richtige Strategie zur Code-Migration auszuwählen. Das Angular-Team ist aufgerüstet, um weiter voranzukommen und ihr Vision für ein neues Reaktivitätsmodell zu realisieren. Die neue Signal-API soll das mentale Modell von Angular-Entwicklern vereinfachen und es einfacher machen, den Zustandssynchronisierungs- und -fluss zu verstehen.

In den letzten zwei Jahren hat sich das Angular-Team auf die Verbesserung der Entwicklererfahrung und Leistung in jedem Release konzentriert. Die neueste Version, v19, führt mehrere neue Funktionen und Verbesserungen ein, darunter inkrementelle Hydratation, Rendermodus auf Routenebene und eine verbesserte Entwicklererfahrung. Die inkrementelle Hydratation ermöglicht es Entwicklern, anzugeben, welche Teile des Templates auf bestimmte Auslöser geladen und hydratisiert werden sollen, was die Leistung verbessert. Der Rendermodus auf Routenebene ermöglicht die Konfiguration einzelner Routen, um serverseitig gerendert, vorgerendert oder auf der Client-Seite gerendert zu werden. Verbesserungen der Entwicklererfahrung umfassen Hot-Modul-Ersetzung für Styles und experimentelle Unterstützung für Template-HMR, Standalone-Standardwerte auf true, strenge Durchsetzung von Standalone und eine neue Test-Tooling-Konfiguration.

Der Release von Angular v19 rückt näher und die Entwickler bereiten sich darauf vor, das Ereignis zu feiern. Das Angular v19-Entwickler-Event findet am 19. November um 9 Uhr Pazifikzeit statt. Um den Anlass zu feiern, werden mehrere Watch-Party-Veranstaltungen auf der ganzen Welt organisiert. In Buenos Aires wird eine Watch-Party am 19. November auf YouTube live übertragen. In Frankreich finden mehrere persönliche Watch-Partys in Nantes, Tours und Paris am 19. November statt, wobei die Anmeldung auf Eventbrite möglich ist. Angular Athens veranstaltet eine virtuelle Watch-Party auf Discord am 19. November. Das Angular Singapore Meetup organisiert ein persönliches Treffen am 19. November, wobei die Anmeldung auf LinkedIn möglich ist. Diese Watch-Partys bieten eine großartige Gelegenheit, um die neuesten Angular-Funktionen zu erfahren, sich mit anderen Entwicklern zu vernetzen und die Aufregung über den großen Release zu teilen. Sie bieten die Chance, sich mit der Angular-Community zu verbinden und den neuen Release zu feiern. Verpassen Sie diese Veranstaltungen nicht und markieren Sie den 19. November in Ihrem Kalender.