Modernisierung von Angular: Was ist neu in Angular 19?

Angular 19 ist offiziell erhältlich und verfügt über eine Reihe von Funktionen, die darauf abzielen, das Entwicklererlebnis, die Leistung und die Anpassungsfähigkeit zu verbessern.

In diesem Artikel führe ich Sie durch die wichtigsten Highlights und was Angular 19 zu einem entscheidenden Schritt vorwärts für die moderne Webentwicklung macht.

1. Inkrementelle Flüssigkeitszufuhr: Ein Game Changer für SSR

Die Einführung der inkrementellen Hydratation in Angular 19 bringt Server-Side Rendering (SSR) auf ein neues Niveau. Im Gegensatz zum herkömmlichen Ansatz der vollständigen Hydratation können die vom Server gerenderten Komponenten bei der inkrementellen Hydratation nur dann hydratisiert werden, wenn sie in das Ansichtsfenster gelangen oder interaktiv werden.

Dies führt zu schnelleren Ladezeiten und einem besseren Benutzererlebnis. Diese Funktion befindet sich derzeit in der Entwicklervorschau, ist aber vielversprechend für die Optimierung des anfänglichen Ladevorgangs und die Verbesserung der Lighthouse-Scores.

Um dies zu erreichen, hat Angular mit Chrome Aurora zusammengearbeitet, um ein nahtloseres SSR-Erlebnis zu schaffen, das an die reale Nutzung angepasst werden kann, wobei der Schwerpunkt auf fauler Flüssigkeitszufuhr liegt. Entwickler können jetzt Anweisungen wie @defer verwenden, um genau zu steuern, wann eine Komponente hydratisiert werden soll, was den Prozess äußerst effizient macht.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

2. Ereigniswiedergabe: Gewährleistung reibungsloser Benutzerinteraktionen

Ein häufiges Problem bei serverseitig gerenderten Apps ist die Verzögerung zwischen einer Benutzerinteraktion und dem Laden des JavaScript, das für die Verarbeitung dieser Interaktion verantwortlich ist.

Ereigniswiedergabe, jetzt standardmäßig in Angular 19 aktiviert, erfasst Benutzerereignisse während des ersten Ladevorgangs und gibt sie wieder, wenn das erforderliche JavaScript verfügbar ist. Dies gewährleistet ein reibungsloses Benutzererlebnis, auch wenn die App noch dabei ist, Feuchtigkeit zu spenden.

Der Ereignisversand basiert auf derselben Bibliothek, die auch von der Google-Suche (Wiz) verwendet wird, und wurde von Milliarden von Nutzern getestet.

Um die Ereigniswiedergabe zu ermöglichen, verwendet Angular das folgende Setup im Hydratationsanbieter:

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

Dadurch wird sichergestellt, dass alle Benutzerinteraktionen, die stattfinden, bevor das JavaScript vollständig geladen ist, nicht verloren gehen, was für ein nahtloses Erlebnis sorgt.

3. Rendermodus auf Routenebene: Feingranulare Steuerung des Renderings

Angular 19 führt den Rendermodus auf Routenebene ein, der es Entwicklern ermöglicht, anzugeben, wie einzelne Routen in einer Anwendung gerendert werden sollen – entweder auf dem Server, Client oder während des Build-Prozesses vorgerendert.

Dies bietet eine detaillierte Kontrolle über die Rendering-Strategie und ermöglicht es Entwicklern, Leistung und SEO basierend auf den spezifischen Anforderungen jeder Route zu optimieren.

Beispiel: Eine Anmelderoute kann serverseitig gerendert werden, um die anfänglichen Ladezeiten zu verkürzen, während eine Dashboard-Route clientseitig gerendert werden kann, um die Interaktivität zu verbessern. Diese Flexibilität trägt dazu bei, dass jeder Teil der Anwendung für den beabsichtigten Anwendungsfall optimiert ist.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

Angular bietet außerdem eine einfache Möglichkeit, Routenparameter während des Vorrenderns aufzulösen, was hochgradig anpassbare vorgerenderte Seiten ermöglicht:

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

Diese neue Schnittstelle, ServerRoute, gibt Entwicklern eine bessere Kontrolle über die Bereitstellung von Inhalten und verbessert so sowohl die Benutzererfahrung als auch die Suchmaschinenoptimierung.

4. Hot Module Replacement (HMR) ist jetzt sofort verfügbar

Angular 19 führt Instant HMR ein, sodass Stile und Vorlagen aktualisiert werden können, ohne die gesamte App neu laden zu müssen. Das bedeutet, dass Entwickler die Auswirkungen ihrer Änderungen sofort sehen können, was den Entwicklungszyklus deutlich reibungsloser und schneller macht. Der Hot-Modul-Ersatz für Stile ist in Version 19 standardmäßig aktiviert! Um HMR für Vorlagen auszuprobieren, verwenden Sie:

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

Um diese Funktion zu deaktivieren, geben Sie „hmr“: false als Entwicklungsserveroption an oder verwenden Sie alternativ:

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

5. Zonenlose Unterstützung: Kontinuierliche Weiterentwicklung

Vor sechs Monaten führte Angular die experimentelle zonenlose-Unterstützung ein. Seitdem hat Angular die APIs iteriert und verbessert – indem es Unterstützung für serverseitiges Rendering hinzugefügt und das Testerlebnis verbessert hat.

Angular hat sich mit dem Google Fonts-Team zusammengetan, um die Anwendung zonenlos zu gestalten und die Entwicklererfahrung zu bewerten. Die Ergebnisse haben die Erwartungen übertroffen, aber bevor diese API in die Entwicklervorschau verschoben wird, müssen noch einige Feinarbeiten vorgenommen werden.

Angular 19 strebt weiterhin eine Zukunft an, in der der zonenlose Betrieb zum Standard wird, was die Änderungserkennung erheblich vereinfacht und Anwendungen schlanker macht.

Um mit zonenlos zu experimentieren, verwenden Sie das folgende Setup:

export const routeConfig: ServerRoute = [{
  path: '/product/:id',
  mode: 'prerender',
  async getPrerenderPaths() {
    const dataService = inject(ProductService);
    const ids = await dataService.getIds();
    return ids.map(id => ({ id }));
  },
}];

6. Verknüpfte Signale: Reaktiver Zustand mit Kontextbewusstsein

Eine der coolsten Neuzugänge sind verknüpfte Signale. Mit dieser Funktion behalten miteinander verbundene Signale ihre Beziehungen auch bei Datenaktualisierungen bei. Dies ist besonders nützlich für Szenarien, in denen mehrere Datenpunkte dynamisch synchron bleiben müssen. Beispielsweise ist das Verwalten des Status eines Dropdowns oder einer Auswahl, die von einer anderen reaktiven Quelle abgeleitet ist, jetzt einfacher und erfordert weniger Boilerplate.

NG_HMR_TEMPLATES=1 ng serve

Die linkedSignal API bietet eine einfache Möglichkeit, Abhängigkeiten zwischen zustandsbehafteten Elementen auszudrücken, ohne auf Effekte zurückgreifen zu müssen. Die neue API hat zwei Formen: eine vereinfachte Version (hier gezeigt) und eine erweiterte Version, die Entwicklern Zugriff auf frühere Werte sowohl der verknüpften als auch der Quellsignale ermöglicht.

7. Winkelmaterial-Upgrades

Angular Material hat in Angular 19 ebenfalls ein bedeutendes Upgrade erhalten. Es gibt jetzt eine neue, besser anpassbare Theming-API, die es Entwicklern ermöglicht, Stile einfach zu überschreiben und das Erscheinungsbild von Angular Material-Komponenten zu optimieren, ohne tief in die Materie einzutauchen verschachteltes CSS. Die Dokumentation jeder Komponente enthält außerdem eine Registerkarte „Styling“, um leichter nachschlagen zu können, wie diese Änderungen vorgenommen werden können.

Die mit Spannung erwartete Komponente Drag and Drop wurde endlich nativ zu Angular Material hinzugefügt und ermöglicht es Entwicklern, anspruchsvolle Drag-and-Drop-Interaktionen zu implementieren, ohne auf Bibliotheken von Drittanbietern angewiesen zu sein.

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration(withIncrementalHydration())
  ]
});

So passen Sie einzelne Komponenten an:

@defer (hydrate on viewport) {
  <shopping-cart></shopping-cart>
}

8. Migrationsskripte für Signale

Dank der integrierten Migrationsskripte ist die Migration Ihrer App auf das neue signalbasierte Reaktivitätsmodell jetzt einfacher. Diese Skripte helfen Ihnen bei der Umstellung Ihrer vorhandenen Eingaben, Ausgaben und Abfragen auf die Verwendung von Signalen anstelle der älteren Angular-Dekoratoren und stellen so sicher, dass Ihre App mit minimalem Aufwand modern bleibt.

bootstrapApplication(App, {
  providers: [
    provideClientHydration(withEventReplay())
  ]
});

9. Erweiterte Inhaltssicherheitsrichtlinie

Sicherheit ist ein weiterer Schwerpunkt dieser Version. Angular 19 führt Unterstützung für Auto CSP (Content Security Policy) ein, das Ihrer Anwendung automatisch eine sichere CSP-Konfiguration hinzufügt, um XSS-Angriffe und andere Schwachstellen standardmäßig zu verhindern. Dies ist ein bedeutender Schritt hin zu besseren Sicherheitspraktiken mit weniger manueller Konfiguration.

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', renderMode: RenderMode.Server },
  { path: '/dashboard', renderMode: RenderMode.Client },
  { path: '/**', renderMode: RenderMode.Prerender },
];

10. Die Zukunft des Testens in Angular

Zuletzt noch ein wichtiger Hinweis zum Testen: Karma wird zugunsten modernerer Tools wie Jest und Web Test Runner veraltet. Bis Mitte 2025 wird Karma nicht mehr unterstützt, was Entwicklern genügend Zeit gibt, auf ein zuverlässigeres Test-Setup umzusteigen, das sich reibungslos in den Rest des modernen Angular-Ökosystems integrieren lässt.

Zusammenfassung

Angular 19 ist nicht nur ein Update; Es handelt sich um eine zukunftsweisende Version, die sowohl die Entwickler- als auch die Benutzererfahrung optimiert. Mit Funktionen wie inkrementeller Hydratation, Ereigniswiedergabe, Rendermodi auf Routenebene, sofortiger HMR, der Umstellung auf Zonenlosigkeit und einer Fülle von Produktivitätsverbesserungen bringt diese Version Angular seinem Ideal näher – einem modernen, leistungsstarken und entwicklerfreundlichen Framework .

Wenn Sie eine Migration durchführen oder ein neues Projekt starten möchten, bietet Angular 19 eine solide Grundlage, die modernste Funktionen und sich weiterentwickelnde Best Practices unterstützt. Lassen Sie mich wissen, welche Funktionen Sie am meisten begeistern oder ob Sie Fragen zur Einführung von Angular 19 in Ihren Projekten haben!

Das obige ist der detaillierte Inhalt vonModernisierung von Angular: Was ist neu in Angular 19?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!