Die im Juli veröffentlichte Version 14.1 von Angular bringt recht viele Neuerungen für eine Minor-Version. In diesem Artikel gehe ich darauf ein. Das verwendete Beispiel findet sich unter [1].

Projektstart mit neuester Version

Typischerweise möchte man ein neues Angular-Projekt mit der jeweils aktuellen Angular-Version starten. Das bedeutet, dass vor dem Aufruf von ng new die aktuelle CLI-Version zu installieren ist. Die neu hinzugekommene Unterstützung für npm init vereinfacht das. Der Aufruf

npm init @angular

genügt, um ein brandneues CLI-Projekt mit der aktuellen Angular-Version zu bekommen.

Abrundungen für Standalone Components

Die wohl bedeutendste Neuerung von Angular 14 liegt in den Standalone Components [2], die Angular-Module optional machen. Um ohne Kontextinformationen aus den Modulen auszukommen, definieren sie ihren eigenen Kontext. Dazu importieren sie alle benötigten Komponenten, Direktiven und Pipes direkt (Listing 1).

@Component({
  standalone: true,
 
  // Kontext:
  imports: [
    // CommonModule,
 
    NgIf,
    NgForOf,
    AsyncPipe,
    JsonPipe,
 
    [...]
    
  ],
  selector: 'flight-search',
  templateUrl: './flight-search.component.html'
})
export class FlightSearchComponent {
  [...]
}

Um häufig verwendete Direktiven wie ngIf oder ngFor zu bekommen, mussten Standalone Components in Version 14.0 noch das gesamte CommonModule importieren. Dasselbe gilt für die im Lieferumfang von Angular enthaltenen Pipes wie async und json.

Seit Version 14.1 sind sämtliche Bestandteile des CommonModules direkt importierbar. Somit können Standalone Components gezielt die benötigten Building Blocks importieren. Um diese ausführliche Auflistung müssen Sie sich zum Glück nicht selbst kümmern. Es ist davon auszugehen, dass der Angular Language Server, der sich um die Angular-Unterstützung in vielen Editoren und IDEs kümmert, hierzu Auto-Imports anbieten wird. „The Webstorm Blog“ von JetBrains [3] bietet diese Möglichkeit bereits heute.

Eine weitere Abrundung für Standalone Components stellen die neuen Funktionen provideAnimations und provideNoopAnimations dar. Sie liefern sämtliche Provider für den Einsatz von Animationen. Zuvor musste man hierzu das BrowserAnimationsModule bzw. das BrowserAnimationsNoopModule einbinden (Listing 2).

bootstrapApplication(AppComponent, {
  providers: [
    [...]
    // Das direkte Hantieren mit Modulen ist nicht mehr notwendig:
    // importProvidersFrom(BrowserAnimationsModule),
    provideAnimations(),
  ]
});

Auch wenn es sich auf den ersten Blick nur um eine kosmetische Neuerung handelt, deutet das Angular-Team damit eine neue Namenskonvention an. Für den Einsatz ohne Module bieten wiederverwendbare Pakete demnach eine Funktion an, deren Name mit provide beginnt. Diese Funktion liefert die benötigten Provider.

Angular-Entwickler:innen sollten somit beim Einsatz eines neuen Pakets nach einer solchen Funktion Ausschau halten. Eine ähnliche Vorgehensweise war bereits in der Vergangenheit in Angular üblich: Angular-Module bieten statische Methoden, deren Namen mit for beginnen (z. B. forRoot, forChild oder forFeature).

Extended Diagnostics

Eine charmante Neuerung in Angular 14 waren Extended Diagnostics. Es handelt sich dabei um statische Quellcodeprüfungen, die der Angular-Compiler durchführt. Diese Prüfungen sollen helfen, Fehler frühzeitig zu entdecken. Die daraus hervorgehenden Warnungen können jedoch nicht nur vom Compiler auf der Konsole angezeigt werden, sondern auch durch eine IDE der...