Angular'ı entegre etme

Statik içerik sunma

Standart dağıtım komutuyla statik içerik yayınlayabilirsiniz:

firebase deploy

Dinamik içeriği önceden oluşturma

Angular'da dinamik içeriği önceden oluşturmak için Angular SSR'yi ayarlamanız gerekir.

ng add @angular/ssr

Daha fazla bilgi için Angular Önceden Oluşturma (SSG) kılavuzuna bakın.

İsteğe bağlı: Sunucu modülü ekleme

Dağıt

firebase deploy ile dağıtım yaptığınızda Firebase, tarayıcı paketinizi ve sunucu paketinizi oluşturur ve uygulamayı önceden oluşturur. Bu öğeler Hosting ve Cloud Functions for Firebase'ye dağıtılır.

Özel dağıtım

Firebase KSA, angular.json içinde üretim derleme yapılandırmasıyla tanımlanmış tek bir uygulamanız olduğunu varsayar.

CLI'nın varsayımlarını uyarlamanız gerekiyorsa FIREBASE_FRAMEWORKS_BUILD_TARGET ortam değişkenini kullanabilir veya AngularFire'ı ekleyip angular.json dosyanızı değiştirebilirsiniz:

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

İsteğe bağlı: Firebase JS SDK ile entegrasyon

Firebase JS SDK yöntemlerini hem sunucu hem de istemci paketlerine dahil ederken ürünü kullanmadan önce isSupported() kontrolü yaparak çalışma zamanı hatalarına karşı koruma sağlayın. Tüm ürünler tüm ortamlarda desteklenmez.

İsteğe bağlı: Firebase Admin SDK ile entegrasyon

Yönetici paketleri tarayıcı derlemenize dahil edilirse başarısız olur. Bu nedenle, bunları sunucu modülünüzde sağlamayı ve isteğe bağlı bağımlılık olarak eklemeyi düşünebilirsiniz:

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

SSR ile tamamen dinamik içerik yayınlama

İsteğe bağlı: Firebase Authentication ile entegrasyon

Web çerçevesiyle uyumlu Firebase dağıtım aracı, çerezleri kullanarak istemci ve sunucu durumunu otomatik olarak senkronize eder. Express res.locals nesnesi, isteğe bağlı olarak kimliği doğrulanmış bir Firebase Uygulaması örneği (firebaseApp) ve şu anda oturum açmış kullanıcıyı (currentUser) içerir. Bu, REQUEST jetonu (tokens dosyasından @nguniversal/express-engine/tokens) aracılığıyla modülünüze eklenebilir.