Sie haben das Konzept der Standalone Components untersucht — Komponenten, die unabhängig vom traditionellen Modulsystem von Angular funktionieren. Aber wie ist das überhaupt möglich? Und woher weiß Angular, dass eine Komponente eigenständig ist?

Werfen wir einen genaueren Blick darauf, was „unter der Haube“ passiert, wenn Sie standalone: true verwenden.

Wie Angular eine Standalone-Komponente verarbeitet

Wenn Angular auf eine Standalone-Komponente trifft, dann:

1. sucht es nicht nach einem Modul, um sie zu deklarieren — da die Komponente sich bereits selbst als eigenständig deklariert;

2. erstellt einen internen Ausführungskontext, in dem alle in den Imports aufgeführten Abhängigkeiten berücksichtigt werden;

3. behandelt die Komponente wie ein Mini-Modul, das alles, was sie benötigt — das Template, die Logik und die Abhängigkeiten — zu einer eigenständigen Einheit bündelt.

Beispiel:

Man könnte sagen, dass Angular ein Mini-Modul direkt innerhalb der Komponente erstellt – und genau das ist die Kernidee des Standalone-Ansatzes.

Standalone-Komponenten: Einfach und effizient

Angular vereinfacht die Arbeit mit Standalone-Komponenten, indem die NgModule-Analysephase übersprungen wird, was zu schnelleren Startzeiten führt. Sämtliche erforderlichen Metadaten werden direkt in der Komponente deklariert, sodass Angular diese schneller kompilieren und rendern kann.

Diese Methode verringert zudem die enge Kopplung zwischen verschiedenen Teilen der Anwendung, was zu einer übersichtlicheren, modulareren Architektur führt, die einfacher zu testen, zu warten und zu skalieren ist.