Standalone Komponenten in Angular

Angular erlaubt seit einiger Zeit (ab Angular 14) die Deklaration und Verwendung sogenannter Standalone Komponenten. Diese sind unabhängig von einem Modul und können also eigenständig verwendet werden.

So erstellt man eine Standalone Komponente

Das Erstellen von Standalone Komponenten ist im Prinzip sehr einfach. Man muß nur das standalone Flag im Component Dekorator auf true setzen. Nachdem die Komponente aber in kein Modul mehr eingebettet ist, muß man auch alle verwendeten Services und anderen Komponenten importieren:

@Component({
  standalone: true,
  selector: 'app-my-component',
  imports: [
     RouterOutlet,
     ReminderComponent
  ],
  templateUrl: './app.my-component.html',
  styleUrls: ['./app.my-component.css']
})
export class AppComponent {

}
Code-Sprache: JavaScript (javascript)

Die imports Deklaration gibt an, welche anderen Bausteine diese Komponente verwenden darf. Dies können andere NgModule aber auch andere Standalone Komponenten sein.

Die Standalone-Komponente hat also in sich schon alle Informationen um als eigenständige Einheit zu agieren. Sie ist nicht abhängig von einem Modul und muss auch nicht in einem Modul deklariert werden. Man kann sich eine Standalone Komponente vorstellen als in einer Einheit zusammengefassten Modul und Komponente.

Angular über eine Standalone Komponente starten (bootstrap)

Bisher musste man in Angular in der main.ts das Start-Module angeben, welches wiederum die Start-Componente deklarieren musste. Im Normalfall war das AppModule und AppComponent, wenn man ein Projekt mit ng erstellt hatte.

Mit der Einführung von Standalone Komponenten kann man die Applikation nun auch bei einer einzigen Komponente starten lassen. Dazu gibt es den neuen Befehl boostrapApplication. Das erste Argument an diesen Befehl ist die Start-Komponente, als zweites Argument kann man die Applikations-weit verwendeten Service Provider angeben, welche man früher im AppModule registrieren würde.

// main.ts
import...

bootstrapApplication(AppComponent, {
  providers: [
     importProvidersFrom(HttpClientModule),
     provideRouter(APP_ROUTES),
     provideAnimations()
  ]
});Code-Sprache: JavaScript (javascript)

Somit ist auch kein zentrales AppModule für eine Angular Applikation mehr nötig. Wie man hier auch sieht, kann man die Provider von existierenden ngModulen mit dem Befehl

importProvidersFrom

importieren. Damit können der modulare- und der Standalone Ansatz nebeneinander existieren. Man muss sich also nicht von heute auf morgen für einen Ansatz entscheiden, sondern die Kompatibilität mit existierendem Module-Code ist weiterhin gegeben.