Integrieren Sie Angular Universal

Mit der Firebase-Framework-fähigen CLI können Sie Ihre Angular-Anwendung in Firebase bereitstellen und Ihren Benutzern dynamische Inhalte bereitstellen.

Bevor Sie beginnen

Bevor Sie mit der Bereitstellung Ihrer App in Firebase beginnen, prüfen Sie die folgenden Anforderungen und Optionen:

Firebase initialisieren

Initialisieren Sie zunächst 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.

Initialisieren Sie ein neues Projekt

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

  2. Führen Sie den Initialisierungsbefehl über die CLI aus und befolgen Sie dann die Anweisungen:

    firebase init hosting

  3. Beantworten Sie die Frage „Möchten Sie ein Webframework verwenden? (experimentell)“ mit Ja.

  4. Wählen Sie Ihr Hosting-Quellverzeichnis; Dies könnte eine vorhandene Angular-App sein.

  5. Wenn Sie dazu aufgefordert werden, wählen Sie Angular.

Initialisieren Sie ein vorhandenes Projekt

Ändern Sie Ihre Hosting-Konfiguration in firebase.json so, dass eine source statt einer public Option vorhanden ist. Zum Beispiel:

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

Stellen Sie statische Inhalte bereit

Nach der Initialisierung von Firebase können Sie statische Inhalte mit dem Standard-Bereitstellungsbefehl bereitstellen:

firebase deploy

Rendern Sie dynamische Inhalte vorab

Um dynamische Inhalte in Angular vorab zu rendern, müssen Sie Angular Universal einrichten. Die Firebase-CLI erwartet Express Engine:

ng add @nguniversal/express-engine

Weitere Informationen finden Sie im Angular Universal-Leitfaden .

Fügen Sie Prerender-URLs hinzu

Standardmäßig wird nur das Stammverzeichnis vorgerendert. Sie können zusätzliche Routen hinzufügen, indem Sie den Prerender-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 respektiert auch guessRoutes oder eine routes.txt -Datei im Hosting-Stammverzeichnis, wenn Sie weitere Anpassungen benötigen. Weitere Informationen zu diesen Optionen finden Sie im Prerendering-Leitfaden von Angular .

Optional: Fügen Sie ein Servermodul hinzu

Einsetzen

Wenn Sie mit firebase deploy bereitstellen, erstellt Firebase Ihr Browser-Bundle und Ihr Server-Bundle und rendert die Anwendung vorab. Diese Elemente werden für Hosting und Cloud Functions für Firebase bereitgestellt.

Benutzerdefinierte Bereitstellung

Die Firebase-CLI geht davon aus, dass Ihre Schaltpläne mit einer Produktionskonfiguration Server-, Build- und Prerender-Schritte enthalten.

Wenn Sie die CLI-Annahmen anpassen möchten, konfigurieren Sie ng deploy und bearbeiten Sie die Konfiguration in angular.json . Sie könnten beispielsweise SSR deaktivieren und ausschließlich vorgerenderten Inhalt bereitstellen, indem Sie serverTarget entfernen:

{
  "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, schützen Sie sich vor Laufzeitfehlern, indem Sie isSupported() überprüfen, bevor Sie das Produkt verwenden. Nicht alle Produkte werden in allen Umgebungen unterstützt .

Optional: Integration mit dem Firebase Admin SDK

Admin-Bundles schlagen fehl, wenn sie in Ihrem Browser-Build enthalten sind. Erwägen Sie daher, sie in Ihrem Servermodul bereitzustellen und als optionale Abhängigkeit einzubinden:

// 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');

Stellen Sie mit SSR vollständig dynamische Inhalte bereit

Optional: Integration mit Firebase-Authentifizierung

Das Web-Framework-fähige Firebase-Bereitstellungstool hält den Client- und Serverstatus mithilfe von Cookies automatisch synchron. Das Express- res.locals -Objekt enthält optional eine authentifizierte Firebase-App-Instanz ( firebaseApp ) und den aktuell angemeldeten Benutzer ( currentUser ). Dies kann über das REQUEST-Token (exportiert aus @nguniversal/express-engine/tokens) in Ihr Modul eingefügt werden.