Angular einbinden

Mit der Framework-kompatiblen Firebase-CLI können Sie Ihre Angular-Anwendung in Firebase bereitstellen und Nutzern dynamische Inhalte präsentieren.

Hinweis

Bevor Sie mit der Bereitstellung Ihrer App in Firebase beginnen, sollten Sie sich die folgenden Anforderungen und Optionen ansehen:

  • Firebase CLI-Version 12.1.0 oder höher. Installieren Sie die CLI mit der gewünschten Methode.

  • Optional: Abrechnung für Ihr Firebase-Projekt aktiviert (erforderlich, wenn Sie SSR verwenden möchten)

  • Optional: AngularFire

Firebase initialisieren

Initialisieren Sie zuerst Firebase für Ihr Framework-Projekt. Verwenden Sie die Firebase CLI für ein neues Projekt oder ändern Sie firebase.json für ein vorhandenes Projekt.

Neues Projekt initialisieren

  1. Aktivieren Sie in der Firebase CLI die Vorschau für Web-Frameworks: 
    firebase experiments:enable webframeworks

  2. Führen Sie den Initialisierungsbefehl über die CLI aus und folgen Sie dann der Anleitung: 

    firebase init hosting

  3. Antworten Sie mit „Ja“ auf die Frage „Möchten Sie ein Web-Framework verwenden? (experimentell)“

  4. Wählen Sie das Hosting-Quellverzeichnis aus. Das kann eine vorhandene Angular-App sein.

  5. Wählen Sie bei Aufforderung „Angular“ aus.

Vorhandenes Projekt initialisieren

Ändern Sie die Hosting-Konfiguration in firebase.json so, dass sie die Option source anstelle der Option public enthält. Beispiel:

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

Statische Inhalte bereitstellen

Nach der Initialisierung von Firebase können Sie statische Inhalte mit dem Standardbereitstellungsbefehl bereitstellen:

firebase deploy

Dynamische Inhalte vorrendern

Wenn Sie dynamische Inhalte in Angular vorrendern möchten, müssen Sie Angular SSR einrichten.

ng add @angular/ssr

Weitere Informationen finden Sie im Leitfaden zum Angular-Prerendering (SSG).

Optional: Servermodul hinzufügen

Bereitstellen

Wenn Sie die Bereitstellung mit firebase deploy vornehmen, erstellt Firebase Ihr Browser-Bundle und Ihr Server-Bundle und rendert die Anwendung vor. Diese Elemente werden in Hosting und Cloud Functions for Firebase bereitgestellt.

Benutzerdefinierte Bereitstellung

Die Firebase-Befehlszeile geht davon aus, dass Sie in Ihrer angular.json eine einzelne Anwendung mit einer Produktionsbuild-Konfiguration definiert haben.

Wenn Sie die Annahmen der CLI anpassen müssen, können Sie entweder die Umgebungsvariable FIREBASE_FRAMEWORKS_BUILD_TARGET verwenden oder AngularFire hinzufügen und angular.json ändern:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "version": 2,
      "buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
    }
  }
}

Optional: Firebase JS SDK einbinden

Wenn Sie Firebase JS SDK-Methoden sowohl in Server- als auch in Client-Bundles einbinden, sollten Sie Laufzeitfehler vermeiden, indem Sie isSupported() prüfen, bevor Sie das Produkt verwenden. Nicht alle Produkte werden in allen Umgebungen unterstützt.

, um dies automatisch zu erledigen.

Optional: Firebase Admin SDK einbinden

Administrator-Bundles schlagen fehl, wenn sie in Ihrem Browser-Build enthalten sind. Stellen Sie sie daher in Ihrem Servermodul bereit und fügen Sie sie als optionale Abhängigkeit ein:

// your-component.ts
import type { app } from 'firebase-admin';
import { FIREBASE_ADMIN } from '../app.module';

@Component({...})
export class YourComponent {

  constructor(@Optional() @Inject(FIREBASE_ADMIN) admin: app.App) {
    ...
  }
}

// app.server.module.ts
import * as admin from 'firebase-admin';
import { FIREBASE_ADMIN } from './app.module';

@NgModule({
  …
  providers: [
    …
    { provide: FIREBASE_ADMIN, useFactory: () => admin.apps[0] || admin.initializeApp() }
  ],
})
export class AppServerModule {}

// app.module.ts
import type { app } from 'firebase-admin';

export const FIREBASE_ADMIN = new InjectionToken<app.App>('firebase-admin');

Vollständig dynamische Inhalte mit SSR bereitstellen

Optional: In Firebase Authentication einbinden

Die webframework-kompatiblen Firebase-Bereitstellungstools sorgen automatisch dafür, dass Client- und Serverstatus mithilfe von Cookies synchronisiert werden. Das Express-res.locals-Objekt enthält optional eine authentifizierte Firebase-App-Instanz (firebaseApp) und den derzeit angemeldeten Nutzer (currentUser). Diese können über das REQUEST-Token (exportiert aus @nguniversal/express-engine/tokens) in Ihr Modul eingefügt werden.