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