Das CommonModule ist eines der wichtigsten Basis-Pakete in Angular. Es enthält essenzielle Werkzeuge wie NgIf, NgFor oder NgClass, sowie fast alle eingebauten Pipes (DatePipe, CurrencyPipe). In modernen Angular-Anwendungen ändert sich jedoch die Art, wie wir diese Werkzeuge nutzen.
Was steckt im CommonModule?
Wenn du früher (vor Angular v14) eine App gebaut hast, musstest du das CommonModule in fast jedes eigene Feature-Modul importieren. Der Grund: Ohne dieses Modul wusste das Angular-Template nicht, was ein *ngIf oder eine | date Pipe ist.
Das CommonModule (aus @angular/common) exportiert unter anderem:
- Struktur-Direktiven:
NgIf,NgForOf(alias*ngFor),NgSwitch - Attribut-Direktiven:
NgClass,NgStyle - Pipes:
AsyncPipe,DatePipe,CurrencyPipe,JsonPipe,LowerCasePipe,UpperCasePipe
Der moderne Weg: Standalone Imports
Seit Angular Standalone Components unterstützt, brauchen wir keine komplizierten NgModule-Konstrukte mehr. Jede Komponente gibt selbst an, welche Abhängigkeiten sie für ihr HTML-Template benötigt.
Du hast nun zwei Möglichkeiten:
Möglichkeit 1: Das ganze CommonModule importieren (Der "faule" Weg)
Wenn du viele verschiedene Direktiven und Pipes in deinem Template nutzt, kannst du einfach das gesamte CommonModule importieren.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // Importiert alles!
@Component({
selector: 'app-user',
template: `
<div *ngIf="user">
<h2>{{ user.name | uppercase }}</h2>
<p>Registriert: {{ user.date | date }}</p>
</div>
`,
standalone: true,
imports: [CommonModule] // Enthält NgIf, UpperCasePipe, DatePipe...
})
export class UserComponent {
user = { name: 'Max', date: new Date() };
}Möglichkeit 2: Einzelne Imports (Best Practice)
Der modernere und sauberere Weg ist es, nur exakt das zu importieren, was du auch wirklich benutzt. Das macht deine Komponente unabhängiger und hilft dem Build-System (Tree Shaking), ungenutzten Code besser zu entfernen.
import { Component } from '@angular/core';
import { NgIf, DatePipe, UpperCasePipe } from '@angular/common'; // Exakte Imports!
@Component({
selector: 'app-user-modern',
template: `
<div *ngIf="user">
<h2>{{ user.name | uppercase }}</h2>
<p>Registriert: {{ user.date | date }}</p>
</div>
`,
standalone: true,
imports: [NgIf, DatePipe, UpperCasePipe] // Nur das Nötigste
})
export class UserModernComponent {
user = { name: 'Max', date: new Date() };
}Interessantes
Mehr als nur NgIf und NgFor
Das CommonModule bündelt deutlich mehr als die bekannten Struktur-Direktiven: u. a. NgComponentOutlet, NgTemplateOutlet, NgPlural sowie Pipes wie SlicePipe, KeyValuePipe, TitleCasePipe, PercentPipe und I18nPluralPipe. Wer es importiert, schleppt also einiges mit.
In NgModule-Apps schon dabei
In klassischen NgModule-Apps ist CommonModule bereits transitiv im Root-Modul enthalten — exportiert über das BrowserModule. Daher gilt: BrowserModule nur einmal im AppModule importieren, in allen Feature-Modulen stattdessen CommonModule.
Mit @if und @for oft komplett überflüssig
Mit dem Built-in Control Flow (@if, @for, @switch) ab v17 entfällt der Hauptzweck des Moduls. Viele Standalone-Komponenten brauchen weder CommonModule noch NgIf/NgFor — höchstens noch eine einzelne Pipe wie AsyncPipe oder DatePipe.
Tree-Shaking-Vorteil bei Einzel-Imports
Auch wenn CommonModule selbst seine Inhalte einzeln re-exportiert: Importiert man gezielt nur DatePipe statt das ganze Modul, hat der Compiler weniger Symbole im Komponenten-Scope zu tracken. Das hält die Komponente fokussiert und erleichtert Refactorings.