ผสานรวม Angular

CLI ที่รับรู้เฟรมเวิร์ก Firebase ช่วยให้คุณสามารถทําให้แอปพลิเคชัน Angular ใช้งานได้ ใน Firebase และแสดงเนื้อหาแบบไดนามิกต่อผู้ใช้

ก่อนเริ่มต้น

ก่อนเริ่มใช้งานการติดตั้งใช้งานแอปใน Firebase โปรดอ่านข้อกำหนดและตัวเลือกต่อไปนี้

• Firebase CLI เวอร์ชัน 12.1.0 ขึ้นไป โปรดติดตั้ง CLI โดยใช้วิธีการที่ต้องการ

• ไม่บังคับ: เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ Firebase (ต้องระบุหากวางแผนที่จะใช้ SSR)

• ไม่บังคับ: AngularFire

เริ่มต้น Firebase

เริ่มต้นใช้งานโดยการเริ่มต้น Firebase สำหรับโปรเจ็กต์เฟรมเวิร์ก ใช้ Firebase CLI สำหรับโปรเจ็กต์ใหม่ หรือแก้ไข firebase.json สำหรับโปรเจ็กต์ที่มีอยู่

เริ่มต้นโปรเจ็กต์ใหม่

1. ใน Firebase CLI ให้เปิดใช้ตัวอย่างเฟรมเวิร์กเว็บโดยทำดังนี้

   firebase experiments:enable webframeworks

2. เรียกใช้คำสั่งเริ่มต้นจาก CLI แล้วทำตามข้อความแจ้ง

   firebase init hosting

3. ตอบว่า "ใช่" สำหรับคำถาม "คุณต้องการใช้เฟรมเวิร์กเว็บไหม" (ทดลอง)"

4. เลือกไดเรกทอรีแหล่งที่มาของการโฮสต์ ซึ่งอาจเป็นแอป Angular ที่มีอยู่

5. หากได้รับข้อความแจ้ง ให้เลือก Angular

เริ่มต้นโปรเจ็กต์ที่มีอยู่

เปลี่ยนการกำหนดค่าการโฮสต์ใน firebase.json เพื่อให้มีตัวเลือก source แทนตัวเลือก public เช่น

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

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

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

firebase deploy

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

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

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)