Integracja z Angular

Dzięki wierszowi poleceń Firebase, który rozpoznaje frameworki, możesz wdrożyć aplikację Angular w Firebase i wyświetlać użytkownikom dynamiczne treści.

Zanim zaczniesz

Zanim zaczniesz wdrażać aplikację w Firebase, zapoznaj się z tymi wymaganiami i opcjami:

• Firebase CLI w wersji 12.1.0 lub nowszej. Pamiętaj, aby zainstalować interfejs wiersza poleceń wybraną metodą.

• Opcjonalnie: włączone płatności w projekcie Firebase (wymagane, jeśli planujesz używać renderowania po stronie serwera)

• Opcjonalnie: AngularFire

Inicjowanie Firebase

Aby rozpocząć, zainicjuj Firebase w projekcie platformy. Użyj interfejsu wiersza poleceń Firebase w przypadku nowego projektu lub zmodyfikuj firebase.json w przypadku istniejącego projektu.

Inicjowanie nowego projektu

1. W interfejsie Firebase włącz podgląd platform internetowych:

   firebase experiments:enable webframeworks

2. Uruchom polecenie inicjowania w interfejsie wiersza poleceń, a potem postępuj zgodnie z wyświetlanymi instrukcjami:

   firebase init hosting

3. Odpowiedz „tak” na pytanie „Czy chcesz użyć platformy internetowej?”. (eksperymentalna)”.

4. Wybierz katalog źródłowy hostingu. Może to być istniejąca aplikacja Angular.

5. Jeśli pojawi się taka prośba, wybierz Angular.

Inicjowanie istniejącego projektu

Zmień konfigurację hostingu w firebase.json, aby mieć opcję source zamiast opcji public. Przykład:

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

Udostępnianie treści statycznych

Po zainicjowaniu Firebase możesz wyświetlać treści statyczne 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 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).