ผสานรวม 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

แพ็กเกจผู้ดูแลระบบจะทำงานไม่สำเร็จหากรวมไว้ในการสร้างเบราว์เซอร์ ดังนั้นโปรดพิจารณา ระบุแพ็กเกจในโมดูลเซิร์ฟเวอร์และแทรกเป็นทรัพยากร Dependency ที่ไม่บังคับ

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