ผสานรวม Angular

แสดงเนื้อหาคงที่

คุณสามารถแสดงเนื้อหาคงที่ด้วยคำสั่งการติดตั้งใช้งานมาตรฐานได้ดังนี้

firebase deploy

แสดงเนื้อหาแบบไดนามิกล่วงหน้า

หากต้องการแสดงเนื้อหาแบบไดนามิกใน Angular ล่วงหน้า คุณต้องตั้งค่า Angular SSR

ng add @angular/ssr

ดูข้อมูลเพิ่มเติมได้ที่คู่มือการแสดงผลล่วงหน้า (SSG) ของ Angular

ไม่บังคับ: เพิ่มโมดูลเซิร์ฟเวอร์

ทำให้ใช้งานได้

เมื่อคุณติดตั้งใช้งานด้วย 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');

แสดงเนื้อหาแบบไดนามิกอย่างเต็มรูปแบบด้วย SSR

ไม่บังคับ: ผสานรวมกับการตรวจสอบสิทธิ์ Firebase

เครื่องมือการติดตั้งใช้งาน Firebase ที่รองรับเฟรมเวิร์กเว็บจะซิงค์สถานะไคลเอ็นต์และเซิร์ฟเวอร์โดยอัตโนมัติโดยใช้คุกกี้ ออบเจ็กต์ res.locals ของ Express จะมีอินสแตนซ์ Firebase App ที่ผ่านการตรวจสอบสิทธิ์ (firebaseApp) และผู้ใช้ที่ลงชื่อเข้าใช้ในปัจจุบัน (currentUser) โดยไม่บังคับ ซึ่งสามารถแทรกลงในโมดูลผ่านโทเค็น REQUEST (ส่งออกจาก @nguniversal/express-engine/tokens)