ผสานรวม Angular Universal

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

ก่อนที่คุณจะเริ่ม

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

Firebase CLI เวอร์ชัน 12.1.0 หรือใหม่กว่า ตรวจสอบให้แน่ใจว่า ได้ติดตั้ง CLI โดยใช้วิธีที่คุณต้องการ
ทางเลือก: เปิดใช้งานการเรียกเก็บเงินในโปรเจ็กต์ Firebase ของคุณ (จำเป็นหากคุณวางแผนที่จะใช้ SSR)
ทางเลือก: AngularFire

เริ่มต้น Firebase

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

เริ่มต้นโครงการใหม่

ใน Firebase CLI ให้เปิดใช้งานการแสดงตัวอย่างเฟรมเวิร์กเว็บ:
```
firebase experiments:enable webframeworks
```
รันคำสั่งการเริ่มต้นจาก CLI จากนั้นปฏิบัติตามพร้อมท์:
```
firebase init hosting
```
ตอบว่าใช่เป็น "คุณต้องการใช้เว็บเฟรมเวิร์กหรือไม่ (ทดลอง)"
เลือกไดเร็กทอรีต้นทางโฮสติ้งของคุณ นี่อาจเป็นแอป 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 จะสร้างชุดเบราว์เซอร์ ชุดเซิร์ฟเวอร์ของคุณ และแสดงผลแอปพลิเคชันล่วงหน้า องค์ประกอบเหล่านี้ปรับใช้กับฟังก์ชั่นโฮสติ้งและคลาวด์สำหรับ 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

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

// 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 Authentication

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