Angular Academy · Lektion

Angular ohne Zone.js

Angular ohne Zone.js ausführen

Angular ohne Zone.js ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Über Zone.js hinaus

Zone.js verursacht zusätzlichen Aufwand und patcht globale APIs. Modernes Angular bietet einen zoneless-Modus, in dem die Änderungserkennung durch Signals und explizite Benachrichtigungen statt durch Zone-Patching gesteuert wird.

Zoneless aktivieren

Stellen Sie den Provider für zoneless Änderungserkennung in Ihrer Bootstrap-Konfiguration bereit.

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

Zone.js entfernen

Im zoneless-Modus entfernen Sie außerdem das zone.js-Polyfill aus Ihrer Build-Konfiguration. Dadurch werden Bundle-Größe und Startaufwand reduziert.

// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'

Was löst die Änderungserkennung jetzt aus?

Ohne Zonen plant Angular die Änderungserkennung ein, wenn sich ein im Template gelesenes Signal ändert, eine async-Pipe einen Wert emittiert, ein Event-Binding ausgelöst wird oder markForCheck() aufgerufen wird.

Signals stehen im Mittelpunkt

Zoneless-Apps stützen sich beim Zustand stark auf Signals. Das Lesen eines Signals im Template erstellt eine Abhängigkeit; eine Aktualisierung benachrichtigt Angular, diese Ansicht zu aktualisieren.

count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CD

Ereignisse benachrichtigen weiterhin

Event-Bindings im Template benachrichtigen Angular direkt. Dadurch aktualisieren Benutzerinteraktionen die Benutzeroberfläche auch ohne Zonen weiterhin.

<button (click)="count.update(c => c + 1)">+</button>

Asynchrone Verarbeitung ohne Zonen

Ein direkt verwendetes setTimeout oder eine asynchrone Verarbeitung ohne Signals löst die Änderungserkennung nicht mehr automatisch aus. Verpacken Sie solchen Zustand in Signals oder rufen Sie markForCheck() auf.

setTimeout(() => this.ready.set(true), 1000);

Kompatibilität der async-Pipe

Die async-Pipe funktioniert auch im zoneless-Modus, da sie die Ansicht bei jeder Emission explizit zur Prüfung markiert.

<p>{{ data$ | async }}</p>

Bibliotheken von Drittanbietern

Manche Bibliotheken gehen davon aus, dass Zone.js die Erkennung automatisch ausführt. Im zoneless-Modus müssen Sie ihre Callbacks möglicherweise so kapseln, dass sie ein Signal aktualisieren oder manuell markForCheck() aufrufen.

Vorteile

Der zoneless-Modus bedeutet kleinere Bundles, einen schnelleren Start, weniger unerwartete zusätzliche Ticks und ein klareres mentales Modell: Die Benutzeroberfläche wird nur aktualisiert, wenn sich tatsächlich ein von Ihnen verfolgter Zustand ändert.

Experimenteller Status

Der Provider heißt provideExperimentalZonelessChangeDetection, weil die API noch stabilisiert wird. Setzen Sie ihn für neue, signalbasierte Apps ein und testen Sie sie gründlich.

Kurzer Test

Testen Sie Ihr Verständnis von zoneless Angular.

Zusammenfassung

Sie haben gelernt, dass provideExperimentalZonelessChangeDetection() die Notwendigkeit von Zone.js beseitigt und Aktualisierungen über Signals, Ereignisse, die async-Pipe und markForCheck() steuert. So entstehen kleinere, schnellere und besser vorhersehbare Apps.

Häufig gestellte Fragen

Ist die Lektion „Angular ohne Zone.js“ kostenlos?

Ja — der vollständige Text von „Angular ohne Zone.js“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Angular ohne Zone.js“?

Angular ohne Zone.js ausführen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Angular ohne Zone.js“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy