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 renderowania wstępnego 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 isSupported() przed użyciem produktu. 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).