Angular Academy · Lektion

Warum Standalone Components

Sehen Sie, wie Standalone Components Angular vereinfachen.

Warum Standalone Components ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Warum Standalone Components?

Standalone Components ermöglichen es Ihnen, Angular-Apps ohne NgModules zu erstellen. Eine Komponente definiert ihre eigenen Abhängigkeiten. Dadurch sind die Bausteine in sich geschlossen und leichter verständlich.

Die NgModule-Ära

Traditionell mussten alle Komponenten, Direktiven und Pipes innerhalb eines @NgModule deklariert werden. Module gruppierten Deklarationen und verwalteten Imports und Exports.

Das führte zu zusätzlichem Boilerplate-Code und einer weiteren Abstraktionsebene.

Probleme durch NgModules

NgModules führten zu typischen Schwierigkeiten: eine Komponente nicht zu deklarieren, sie in zwei Modulen zu deklarieren, Imports und Deklarationen zu verwechseln sowie große Shared Modules, die zu viele Abhängigkeiten einbanden.

Die Standalone-Idee

Bei Standalone Components führt jede Komponente über ihr eigenes imports-Array genau auf, was sie benötigt. Es gibt kein zentrales Modul, das über sie Bescheid wissen muss.

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  template: '<p>Hello</p>'
})
export class HelloComponent {}

In sich geschlossene Abhängigkeiten

Da eine Standalone Component ihre eigenen Abhängigkeiten deklariert, können Sie eine einzelne Datei lesen und wissen, wovon sie vollständig abhängt. Das verbessert die Übersichtlichkeit und die Unterstützung durch Entwicklungswerkzeuge.

Weniger Boilerplate-Code

Keine aufeinander abzustimmenden Deklarationen und Exports über mehrere Module hinweg mehr. Sie importieren eine Komponente direkt dort, wo Sie sie verwenden – ähnlich wie bei ES-Modulen.

Besseres Tree-Shaking

Standalone Components machen den Abhängigkeitsgraphen explizit. Dadurch können Bundler ungenutzten Code besser entfernen, was zu kleineren Bundles führen kann.

Lazy Loading leicht gemacht

Routen können eine Standalone Component direkt über einen dynamischen Import verzögert laden, ohne dass ein Feature-Module-Wrapper erforderlich ist.

// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)

Der neue Standard

In aktuellen Angular-Versionen ist Standalone die Standardeinstellung für neu generierte Komponenten. NgModules funktionieren weiterhin, aber Standalone ist der empfohlene Weg für die Zukunft.

Zusammenspiel mit NgModules

Standalone- und modulbasierter Code können zusammen verwendet werden. Eine Standalone Component kann in ein NgModule importiert werden, und eine auf NgModules basierende Komponente kann Standalone-Imports verwenden. Das erleichtert die Migration.

Was Sie weiterhin konfigurieren

Anwendungsweite Konfigurationen (etwa Router oder HTTP-Client) werden über bootstrapApplication-Provider statt über ein Root-Modul bereitgestellt. Das sehen Sie später.

Kurztest: Warum Standalone?

Was ist der wesentliche Vorteil von Standalone Components?

Zusammenfassung: Warum Standalone?

Standalone Components beseitigen den Boilerplate-Code von NgModules, indem jede Komponente ihre eigenen Abhängigkeiten deklariert. Das sorgt für übersichtlicheren Code, einfacheres Lazy Loading und besseres Tree-Shaking. Standalone ist nun die Standardeinstellung. Als Nächstes erstellen Sie eine solche Komponente.

Häufig gestellte Fragen

Ist die Lektion „Warum Standalone Components“ kostenlos?

Ja — der vollständige Text von „Warum Standalone Components“ 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 „Warum Standalone Components“?

Sehen Sie, wie Standalone Components Angular vereinfachen. 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 1 von 4.

Wie lange dauert die Lektion „Warum Standalone Components“?

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