ผสานรวม Angular Universal

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 คุณต้องตั้งค่า Angular Universal Firebase CLI ต้องการ Express Engine:

ng add @nguniversal/express-engine

ดูข้อมูลเพิ่มเติมในคู่มือ Angular Universal

เพิ่ม URL ที่แสดงผลล่วงหน้า

โดยค่าเริ่มต้น ระบบจะแสดงเฉพาะไดเรกทอรีรูทล่วงหน้า คุณเพิ่มเส้นทางอื่นๆ ได้โดยดูขั้นตอนการแสดงผลล่วงหน้าใน angular.json และเพิ่มเส้นทางอื่นๆ ดังนี้

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

Firebase ยังดำเนินการตามไฟล์ guessRoutes หรือ routes.txt ในรูทของโฮสติ้งด้วย หากคุณจำเป็นต้องปรับแต่งเพิ่มเติม ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกเหล่านั้นได้ในคำแนะนำในการแสดงผลล่วงหน้าของ Angular

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

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

เมื่อคุณทำให้ใช้งานได้ด้วย firebase deploy แล้ว Firebase จะสร้างแพ็กเกจเบราว์เซอร์ แพ็กเกจเซิร์ฟเวอร์ และการแสดงผลล่วงหน้าสำหรับแอปพลิเคชัน ซึ่งองค์ประกอบเหล่านี้จะใช้งานได้กับโฮสติ้งและ Cloud Functions for Firebase

การทำให้ใช้งานได้ที่กำหนดเอง

Firebase CLI จะถือว่าคุณมีขั้นตอนของเซิร์ฟเวอร์ บิลด์ และการแสดงผลล่วงหน้าในสคีมาที่มีการกำหนดค่าเวอร์ชันที่ใช้งานจริง

หากต้องการปรับแต่งสมมติฐานของ CLI ให้กำหนดค่า ng deploy และแก้ไขการกำหนดค่าใน angular.json ตัวอย่างเช่น คุณอาจปิดใช้ SSR และแสดงเนื้อหาที่แสดงผลล่วงหน้าโดยเฉพาะได้โดยนำ serverTarget ออก ดังนี้

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

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