Angular को इंटिग्रेट करना

स्थिर कॉन्टेंट दिखाना

डिप्लॉयमेंट के स्टैंडर्ड कमांड का इस्तेमाल करके, स्थिर कॉन्टेंट दिखाया जा सकता है:

firebase deploy

डाइनैमिक कॉन्टेंट को पहले से रेंडर करना

Angular में डाइनैमिक कॉन्टेंट को पहले से रेंडर करने के लिए, आपको Angular SSR सेट अप करना होगा.

ng add @angular/ssr

ज़्यादा जानकारी के लिए, Angular Prerendering (SSG) गाइड देखें.

ज़रूरी नहीं: सर्वर मॉड्यूल जोड़ना

डिप्लॉय करें

firebase deploy की मदद से डिप्लॉय करने पर, Firebase आपके ब्राउज़र बंडल और सर्वर बंडल को बनाता है. साथ ही, ऐप्लिकेशन को पहले से रेंडर करता है. इन एलिमेंट को, Hosting और Cloud Functions for Firebase पर डिप्लॉय किया जाता है.

पसंद के मुताबिक डिप्लॉयमेंट

Firebase CLI यह मानकर चलता है कि आपके angular.json में, प्रोडक्शन बिल्ड कॉन्फ़िगरेशन के साथ सिर्फ़ एक ऐप्लिकेशन तय किया गया है.

अगर आपको CLI की मान्यताओं में बदलाव करना है, तो FIREBASE_FRAMEWORKS_BUILD_TARGET एनवायरमेंट वैरिएबल का इस्तेमाल किया जा सकता है. इसके अलावा, AngularFire जोड़कर, अपने angular.json में बदलाव किया जा सकता है:

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

ज़रूरी नहीं: Firebase JS SDK टूल के साथ इंटिग्रेट करना

सर्वर और क्लाइंट, दोनों बंडल में Firebase JS SDK टूल के तरीके शामिल करते समय, प्रॉडक्ट का इस्तेमाल करने से पहले isSupported() की जांच करके, रनटाइम में होने वाली गड़बड़ियों से बचें. सभी प्रॉडक्ट, सभी एनवायरमेंट में काम नहीं करते.

ज़रूरी नहीं: Firebase Admin SDK टूल के साथ इंटिग्रेट करना

अगर एडमिन बंडल को आपके ब्राउज़र बिल्ड में शामिल किया जाता है, तो वे काम नहीं करेंगे. इसलिए, उन्हें अपने सर्वर मॉड्यूल में शामिल करें और वैकल्पिक डिपेंडेंसी के तौर पर इंजेक्ट करें:

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

एसएसआर की मदद से, पूरी तरह से डाइनैमिक कॉन्टेंट दिखाना

ज़रूरी नहीं: Firebase Authentication के साथ इंटिग्रेट करना

वेब फ़्रेमवर्क-अवेयर Firebase डिप्लॉयमेंट टूलिंग, कुकी का इस्तेमाल करके क्लाइंट और सर्वर की स्थिति को अपने-आप सिंक में रखती है. Express res.locals ऑब्जेक्ट में, पुष्टि किया गया Firebase ऐप्लिकेशन इंस्टेंस (firebaseApp) और फ़िलहाल साइन इन किया हुआ उपयोगकर्ता (currentUser) शामिल हो सकता है. इसे REQUEST टोकन (जो @nguniversal/express-engine/tokens से एक्सपोर्ट किया गया है) के ज़रिए, आपके मॉड्यूल में इंजेक्ट किया जा सकता है.