Angular einbinden

Statische Inhalte bereitstellen

Sie können statische Inhalte mit dem Standardbefehl für die Bereitstellung bereitstellen:

firebase deploy

Dynamische Inhalte vorab rendern

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

ng add @angular/ssr

Weitere Informationen finden Sie im Leitfaden zum Vorabrendern von Angular (SSG).

Optional: Servermodul hinzufügen

Bereitstellen

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

Benutzerdefinierte Bereitstellung

Die Firebase CLI geht davon aus, dass in Ihrer angular.json eine einzelne Anwendung mit einer Produktions-Build-Konfiguration definiert ist.

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

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

Optional: In das Firebase JS SDK einbinden

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

Optional: In das Firebase Admin SDK einbinden

Admin-Bundles führen zu Fehlern, wenn sie in Ihren Browser-Build aufgenommen werden. Sie sollten sie daher in Ihrem Servermodul bereitstellen und als optionale Abhängigkeit einfügen:

// 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 web-framework-aware Firebase-Bereitstellungstools synchronisieren den Client- und Serverstatus automatisch mithilfe von Cookies. Das Express-Objekt res.locals enthält optional eine authentifizierte Firebase App-Instanz (firebaseApp) und den aktuell angemeldeten Nutzer (currentUser). Diese können über das REQUEST-Token (exportiert aus @nguniversal/express-engine/tokens) in Ihr Modul eingefügt werden.