Integracja z Angular

Udostępnianie treści statycznych

Treści statyczne możesz udostępnić za pomocą standardowego polecenia wdrażania:

firebase deploy

Wstępne renderowanie zawartości dynamicznej

Aby wstępnie renderować treści dynamiczne w Angularze, musisz skonfigurować Angular SSR.

ng add @angular/ssr

Więcej informacji znajdziesz w przewodniku dotyczącym wstępnego renderowania w Angularze (SSG).

Opcjonalnie: dodaj moduł serwera

Wdróż

Gdy wdrażasz aplikację za pomocą firebase deploy, Firebase tworzy pakiet przeglądarki, pakiet serwera i wstępnie renderuje aplikację. Te elementy są wdrażane w Hosting i Cloud Functions for Firebase.

Wdrożenie niestandardowe

Interfejs wiersza poleceń Firebase zakłada, że w pliku angular.json masz zdefiniowaną jedną aplikację z konfiguracją kompilacji produkcyjnej.

Jeśli chcesz dostosować założenia interfejsu wiersza poleceń, możesz użyć zmiennej środowiskowej FIREBASE_FRAMEWORKS_BUILD_TARGET lub dodać AngularFire i zmodyfikować angular.json:

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

Opcjonalnie: integracja z pakietem Firebase JS SDK

Jeśli w pakietach serwera i klienta umieszczasz metody pakietu Firebase JS SDK, zabezpiecz się przed błędami w czasie działania, sprawdzając isSupported() przed użyciem usługi. Nie wszystkie produkty są obsługiwane we wszystkich środowiskach.

Opcjonalnie: integracja z pakietem Firebase Admin SDK

Pakiety administracyjne nie będą działać, jeśli zostaną uwzględnione w kompilacji przeglądarki, więc warto udostępnić je w module serwera i wstrzyknąć jako opcjonalną zależność:

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

Obsługa w pełni dynamicznych treści za pomocą renderowania po stronie serwera

Opcjonalnie: integracja z Uwierzytelnianiem Firebase

Narzędzia do wdrażania Firebase, które są dostosowane do platform internetowych, automatycznie synchronizują stan klienta i serwera za pomocą plików cookie. Obiekt Express res.locals może opcjonalnie zawierać uwierzytelnioną instancję aplikacji Firebase (firebaseApp) i aktualnie zalogowanego użytkownika (currentUser). Można go wstrzyknąć do modułu za pomocą tokena REQUEST (eksportowanego z @nguniversal/express-engine/tokens).