Angular Academy · Lektion

Eine Standalone-App bootstrappen

Starten Sie eine App mit bootstrapApplication.

Eine Standalone-App bootstrappen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Eine Standalone-App bootstrappen

Eine vollständig Standalone-App startet mit bootstrapApplication statt mit dem Bootstrap eines Root-NgModules. Sie übergeben dabei Ihre Root-Komponente.

Der Einstiegspunkt: main.ts

Die Einstiegsdatei der Anwendung ist main.ts. Sie ruft bootstrapApplication mit der Root-Komponente auf, typischerweise AppComponent.

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

Woher bootstrapApplication stammt

bootstrapApplication wird aus @angular/platform-browser importiert. Es ersetzt das ältere Muster platformBrowserDynamic().bootstrapModule.

Die Root-Komponente

Die Root-Komponente ist eine gewöhnliche Standalone Component. Sie enthält normalerweise den Router-Outlet oder das Layout der obersten Ebene.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>My App</h1>'
})
export class AppComponent {}

Anwendungsweite Services bereitstellen

Anwendungsweite Provider kommen in das zweite Argument: ein Objekt mit einem providers-Array. Hier werden Router, HTTP-Client und globale Services konfiguriert.

bootstrapApplication(AppComponent, {
  providers: []
});

Den Router bereitstellen

Verwenden Sie provideRouter(routes), um das Routing für eine Standalone-App einzurichten.

import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

HttpClient bereitstellen

Aktivieren Sie HTTP mit provideHttpClient() im providers-Array.

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

Provider kombinieren

Führen Sie beliebig viele benötigte provide*-Funktionen gemeinsam auf.

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

Das Muster app.config.ts

Die CLI lagert Provider häufig als ApplicationConfig in app.config.ts aus, damit main.ts übersichtlich bleibt.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

app.config in main.ts verwenden

Dann übergibt main.ts einfach appConfig.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig);

Fehlerbehandlung

bootstrapApplication gibt ein Promise zurück. Sie können Startfehler abfangen und protokollieren.

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

Kurztest: Bootstrapping

Wie startet eine Standalone-App?

Zusammenfassung: Bootstrapping

Sie bootstrappen eine Standalone-App mit bootstrapApplication(AppComponent) und übergeben anwendungsweite Provider wie provideRouter und provideHttpClient. Die CLI lagert diese in app.config.ts aus. Ein Root-NgModule ist nicht erforderlich. Damit haben Sie den Deep Dive zu Standalone Components abgeschlossen.

Häufig gestellte Fragen

Ist die Lektion „Eine Standalone-App bootstrappen“ kostenlos?

Ja — der vollständige Text von „Eine Standalone-App bootstrappen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Eine Standalone-App bootstrappen“?

Starten Sie eine App mit bootstrapApplication. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Eine Standalone-App bootstrappen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy