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, prüfen Sie die folgenden Anforderungen und Optionen:

• Firebase-Befehlszeile 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 Initialisierungsbefehl über die Befehlszeile aus und folgen Sie dann den Eingabeaufforderungen:

   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 so, dass sie die Option source anstelle von public enthält. 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-Befehlszeile erwartet Express Engine:

ng add @nguniversal/express-engine

Weitere Informationen finden Sie im Leitfaden zu Angular Universal.

Prerender-URLs hinzufügen

Standardmäßig wird nur das Stammverzeichnis vorab gerendert. Sie können weitere Routen hinzufügen, indem Sie den Pre-Rendering-Schritt 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

Bei der Bereitstellung mit firebase deploy erstellt Firebase Ihr Browser-Bundle und Ihr Server-Bundle und rendert die Anwendung vorab. 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. Zum Beispiel kannst du SSR deaktivieren und vorgerenderte Inhalte ausschließlich bereitstellen, 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, prüfen Sie vor der Verwendung des Produkts isSupported(), um Laufzeitfehler zu vermeiden. Nicht alle Produkte werden in allen Umgebungen unterstützt.

Optional: Firebase Admin SDK einbinden

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

Die auf dem Web-Framework basierenden Firebase-Bereitstellungstools halten den Client- und Serverstatus mithilfe von Cookies automatisch 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.