Tích hợp Angular

Phân phát nội dung tĩnh

Bạn có thể phân phát nội dung tĩnh bằng lệnh triển khai tiêu chuẩn:

firebase deploy

Kết xuất trước nội dung động

Để kết xuất trước nội dung động trong Angular, bạn cần thiết lập SSR Angular.

ng add @angular/ssr

Hãy xem hướng dẫn về Kết xuất trước Angular (SSG) để biết thêm thông tin.

Không bắt buộc: thêm mô-đun máy chủ

Triển khai

Khi bạn triển khai bằng firebase deploy, Firebase sẽ tạo gói trình duyệt, gói máy chủ và kết xuất trước ứng dụng. Các phần tử này được triển khai vào Hosting và Cloud Functions for Firebase.

Triển khai tuỳ chỉnh

CLI Firebase giả định rằng bạn có một ứng dụng duy nhất được xác định trong angular.json với cấu hình bản dựng sản xuất.

Nếu cần điều chỉnh các giả định của CLI, bạn có thể sử dụng biến môi trường FIREBASE_FRAMEWORKS_BUILD_TARGET hoặc thêm AngularFire và sửa đổi angular.json:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "version": 2,
      "buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
    }
  }
}

Không bắt buộc: tích hợp với Firebase JS SDK

Khi đưa các phương thức Firebase JS SDK vào cả gói máy chủ và gói ứng dụng, hãy bảo vệ chống lại lỗi thời gian chạy bằng cách kiểm tra isSupported() trước khi sử dụng sản phẩm. Không phải sản phẩm nào cũng được hỗ trợ trong mọi môi trường.

Không bắt buộc: tích hợp với Firebase Admin SDK

Gói quản trị sẽ không thành công nếu được đưa vào bản dựng trình duyệt, vì vậy, hãy cân nhắc cung cấp các gói này trong mô-đun máy chủ và chèn dưới dạng phần phụ thuộc không bắt buộc:

// 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');

Phân phát nội dung hoàn toàn động bằng SSR

Không bắt buộc: tích hợp với Xác thực Firebase

Công cụ triển khai Firebase nhận biết khung web sẽ tự động đồng bộ hoá trạng thái máy khách và máy chủ bằng cookie. Đối tượng res.locals Express sẽ tuỳ ý chứa một thực thể Ứng dụng Firebase đã xác thực (firebaseApp) và người dùng hiện đã đăng nhập (currentUser). Bạn có thể chèn đối tượng này vào mô-đun thông qua mã thông báo YÊU CẦU (được xuất từ @nguniversal/express-engine/tokens).