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 Interfejs wiersza poleceń 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żywać platformy internetowej?”. (eksperymentalna)”.

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

5. W razie potrzeby 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ć renderowanie po stronie serwera w Angularze.

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 usługi 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ą SSR

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).