Integracja z Angular

Obsługa treści statycznych

Treści statyczne możesz obsługiwać za pomocą standardowego polecenia wdrożenia:

firebase deploy

Wstępne renderowanie treści dynamicznych

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 za pomocą polecenia 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 musisz dostosować założenia interfejsu wiersza poleceń, możesz użyć zmiennej środowiskowej FIREBASE_FRAMEWORKS_BUILD_TARGET lub dodać AngularFire i zmodyfikować plik angular.json:

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

Opcjonalnie: zintegruj z pakietem Firebase JS SDK

Jeśli w pakietach serwera i klienta uwzględniasz metody pakietu Firebase JS SDK, zabezpiecz się przed błędami środowiska wykonawczego, sprawdzając, czy przed użyciem produktu jest on obsługiwany za pomocą funkcji isSupported(). Nie wszystkie produkty są obsługiwane we wszystkich środowiskach.

Opcjonalnie: zintegruj z pakietem Firebase Admin SDK

Pakiety administracyjne nie będą działać, jeśli zostaną uwzględnione w kompilacji przeglądarki, dlatego rozważ udostępnienie ich w module serwera i wstrzyknięcie jako opcjonalnej zależności:

// 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ą SSR

Opcjonalnie: zintegruj z uwierzytelnianiem Firebase

Narzędzie do wdrażania Firebase z obsługą frameworków internetowych automatycznie synchronizuje stan klienta i serwera za pomocą plików cookie. Obiekt res.locals Express będzie 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).