Angular Universal integrieren

Mit der Firebase-CLI können Sie Ihre Angular-Anwendung in Firebase bereitstellen und Ihren Nutzern dynamische Inhalte zur Verfügung stellen.

Hinweis

Bevor Sie mit der Bereitstellung Ihrer App in Firebase beginnen, sollten Sie sich mit den folgenden Anforderungen und Optionen vertraut machen:

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

• Optional: Abrechnung in Ihrem 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-Befehlszeile die Vorschau der Web-Frameworks:

   firebase experiments:enable webframeworks

2. Führen Sie den Befehl zum Initialisieren über die Befehlszeile aus und folgen Sie 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. Dies kann eine vorhandene Angular-App sein.

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

Vorhandenes Projekt initialisieren

Ändern Sie die Hostingkonfiguration in firebase.json, sodass die Option source statt public verwendet wird. Beispiel:

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

Statische Inhalte bereitstellen

Nachdem Sie Firebase initialisiert haben, können Sie statische Inhalte mit dem Standardbefehl für die Bereitstellung bereitstellen:

firebase deploy

Dynamischen Content vorab rendern

Wenn Sie dynamische Inhalte in Angular vorab rendern möchten, müssen Sie Angular Universal einrichten. Die Firebase CLI erwartet die Express-Engine:

ng add @nguniversal/express-engine

Weitere Informationen finden Sie im Angular Universal-Leitfaden.

Prerender-URLs hinzufügen

Standardmäßig wird nur das Stammverzeichnis vorab gerendert. Sie können zusätzliche Routen hinzufügen, indem Sie den Schritt „Prerender“ in angular.json suchen und weitere Routen hinzufügen:

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

Firebase berücksichtigt auch eine guessRoutes- oder routes.txt-Datei im Hosting-Stammverzeichnis, falls Sie weitere Anpassungen vornehmen müssen. Weitere Informationen zu diesen Optionen finden Sie im Angular-Leitfaden zum Prerendering.

Optional: Servermodul hinzufügen

Bereitstellen

Wenn Sie mit firebase deploy bereitstellen, erstellt Firebase Ihr Browser- und Ihr Server-Bundle und führt ein Pre-Rendering der Anwendung durch. Diese Elemente werden auf Hosting und Cloud Functions for Firebase bereitgestellt.

Benutzerdefinierte Bereitstellung

Die Firebase-Befehlszeile geht davon aus, dass Sie in Ihren Schaltplänen mit einer Produktionskonfiguration Server-, Build- und Pre-Render-Schritte haben.

Wenn Sie die Annahmen der Befehlszeile anpassen möchten, konfigurieren Sie ng deploy und bearbeiten Sie die Konfiguration in angular.json. Du kannst beispielsweise SSR deaktivieren und ausschließlich vorrenderte Inhalte ausliefern, indem du serverTarget entfernst:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

Optional: Integration mit dem Firebase JS SDK

Wenn Sie Firebase JS SDK-Methoden sowohl in Server- als auch in Client-Bundles einbinden, sollten Sie vor der Verwendung des Produkts isSupported() prüfen, um Laufzeitfehler zu vermeiden. Nicht alle Produkte werden in allen Umgebungen unterstützt.

Optional: Integration mit dem Firebase Admin SDK

Admin-Bundles funktionieren nicht, wenn sie in Ihrem Browser-Build enthalten sind. Sie sollten sie daher in Ihrem Servermodul bereitstellen und als optionale Abhängigkeit einschleusen:

// 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: Firebase Authentication einbinden

Das web-framework-kompatible Firebase-Bereitstellungstool hält den Client- und Serverstatus automatisch mithilfe von Cookies synchron. Das Express-Objekt res.locals enthält optional eine authentifizierte Firebase App-Instanz (firebaseApp) und den derzeit angemeldeten Nutzer (currentUser). Diese können über das REQUEST-Token (aus @nguniversal/express-engine/tokens exportiert) in Ihr Modul eingefügt werden.