Angular-Komponentenbibliotheken, nach Architektur verglichen
Das ist keine Rangliste. Jede Bibliothek hier ist gut gebaut und wird gepflegt, und welche passt, hängt von einer Entscheidung ab, die Sie treffen, bevor Sie überhaupt Funktionen vergleichen: wie viel Sie installieren wollen und wie viel gestalterische Meinung damit bei Ihnen ankommen soll. Das Folgende wurde anhand der veröffentlichten Pakete geprüft, nicht anhand irgendeiner Dokumentation.
1 · Was jede von Ihrer Anwendung verlangt
Die interessante Spalte ist die dritte. Eine Komponentenbibliothek kommt selten allein, und was mit ihr kommt, landet in Ihrer Lockfile, Ihrem Bundle und Ihrem Upgrade-Pfad, solange Sie sie behalten.
| Paket | Was Sie installieren | Was außer Angular mitkommt | Woher die Styles kommen |
|---|---|---|---|
@angular/material | Ein Paket, dazu das Angular CDK | Das CDK und sechs Angular-Peers | Vorgefertigte Themes, die im Paket mitgeliefert werden |
primeng | Ein Paket | Sieben eigene Pakete, dazu das Angular CDK | Kein CSS im Paket; die Styles kommen über diese Abhängigkeiten |
@ng-bootstrap/ng-bootstrap | Ein Paket, dazu Popper | Popper | Gar keine; das Stylesheet von Bootstrap bringen Sie selbst mit |
ng-zorro-antd | Ein Paket | Das CDK, eine Datumsbibliothek, eine Farbbibliothek und ein Icon-Set | Eine eigene Designsprache |
@taiga-ui/core | Pakete in Schichten | Fünfzehn Peer-Pakete allein für den Kern | Eine eigene Designsprache |
ng-hub-ui-* | Ein Paket je Komponente | Ein gemeinsames Helfer-Paket, sonst nichts | CSS Custom Properties; das Design-System-Paket ist optional |
Geprüft im September 2026 anhand der jeweils neuesten veröffentlichten Version jedes Pakets. Abhängigkeitslisten ändern sich; die Muster, die sie beschreiben, nur selten.
2 · Wann welche die richtige Wahl ist
Angular Material ist die Antwort, wenn Sie die Designsprache Material wollen und den Rückhalt des Teams, das Angular selbst schreibt. In einer großen Organisation ist es das Sicherste auf dieser Seite, und das CDK darunter ist die am besten erprobte Verhaltensschicht im Ökosystem — mehrere der Bibliotheken hier bauen darauf auf.
PrimeNG ist die Antwort, wenn Sie Breite brauchen: rund hundert Komponenten, darunter jene, die niemand von Hand schreiben möchte, und ein einheitliches Erscheinungsbild vom ersten Tag an, ohne etwas zu gestalten.
ng-bootstrap ist die Antwort, wenn die Anwendung bereits Bootstrap verwendet und Sie dessen Komponenten als Angular-Komponenten haben wollen, ohne das eigene JavaScript von Bootstrap. Es liefert genau deshalb keine Styles mit, weil Sie sie schon haben.
NG-ZORRO ist die Antwort, wenn Sie Ant Design wollen — ein vollständiges visuelles System und kein Satz von Einzelteilen — und mit den Datums-, Farb- und Icon-Bibliotheken einverstanden sind, die mitkommen.
Taiga UI ist die Antwort, wenn Sie ein großes, streng typisiertes System wollen und es Ihnen recht ist, es in Schichten statt als ein Stück zu installieren.
Hub UI ist die Antwort, wenn Sie eine Komponente brauchen und kein System. Sie installieren das Kanban-Board oder die Datentabelle, keine Designsprache: Außer dem gemeinsamen Helfer-Paket kommt nichts mit, und ein eigenes Erscheinungsbild bringt es nicht — worauf es gerade dann ankommt, wenn die Anwendung schon eines hat. Sie kleiden es mit --hub-*-Custom-Properties ein, ohne Sass neu zu bauen und ohne Kampf mit der Spezifität, denn die Standardwerte sind mit Spezifität null deklariert und jedes Token fällt auf einen literalen Wert zurück.
3 · Wann Hub UI nicht die Antwort ist
Drei Fälle, und in allen dreien ist eine der Bibliotheken oben die bessere Wahl:
- Sie wollen eine fertige Designsprache, die für Sie entschieden ist. Material und Ant Design geben Ihnen eine; diese Familie bewusst nicht, und ein stimmiges Erscheinungsbild auf Tokens aufzubauen ist dann Arbeit, die Sie selbst leisten müssen.
- Sie brauchen bald hundert Komponenten. Der Katalog umfasst fünfundzwanzig, er wächst langsam und wird nicht alles abdecken, was Ihnen begegnet.
- Ihr Team braucht die Sicherheit einer großen Community und vieler Maintainer. Das ist es heute nicht, und das ist ein berechtigter Grund, sich anders zu entscheiden.