Angular'ı entegre etme

Firebase çerçeveye duyarlı KSA ile Angular uygulamanızı Firebase'e dağıtabilir ve kullanıcılarınıza dinamik içerik sunabilirsiniz.

Başlamadan önce

Uygulamanızı Firebase'e dağıtmaya başlamadan önce aşağıdaki koşulları ve seçenekleri inceleyin:

• Firebase KSA 12.1.0 veya sonraki sürümleri. Tercih ettiğiniz yöntemi kullanarak CLI'yi yüklediğinizden emin olun.

• İsteğe bağlı: Firebase projenizde faturalandırma etkinleştirilmiş olmalıdır (SSR kullanmayı planlıyorsanız gereklidir).

• İsteğe bağlı: AngularFire

Firebase'i başlatma

Başlamak için çerçeve projenizde Firebase'i başlatın. Yeni bir proje için Firebase CLI'yı kullanın veya mevcut bir proje için firebase.json'ı değiştirin.

Yeni bir projeyi başlatma

1. Firebase CLI'da web çerçeveleri önizlemesini etkinleştirin:

   firebase experiments:enable webframeworks

2. Başlatma komutunu CLI'dan çalıştırın ve istemleri uygulayın:

   firebase init hosting

3. "Web çerçevesi kullanmak istiyor musunuz?" sorusuna evet yanıtını verin. (deneysel)"

4. Barındırma kaynak dizininizi seçin. Bu, mevcut bir Angular uygulaması olabilir.

5. İstenirse Angular'ı seçin.

Mevcut bir projeyi başlatma

firebase.json seçeneğinde barındırma yapılandırmanızı source seçeneği yerine public seçeneğini kullanacak şekilde değiştirin. Örneğin:

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

Statik içerik sunma

Firebase'i başlattıktan sonra, standart dağıtım komutuyla statik içerik sunabilirsiniz:

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() işaretini kontrol ederek ç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.