Интегрировать Angular

Предоставлять статический контент

Вы можете предоставлять статический контент с помощью стандартной команды развертывания:

firebase deploy

Предварительная отрисовка динамического контента

Для предварительной отрисовки динамического контента в Angular необходимо настроить Angular SSR.

ng add @angular/ssr

Для получения более подробной информации см. руководство по предварительной отрисовке Angular (SSG) .

Дополнительно: добавьте серверный модуль.

Развертывать

При развертывании с помощью 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.

Если административные пакеты включены в сборку для браузера, они не будут работать, поэтому рассмотрите возможность их предоставления в модуле сервера и внедрения в качестве необязательной зависимости:

// 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, поддерживающие веб-фреймворки, автоматически синхронизируют состояние клиента и сервера с помощью файлов cookie. Объект Express res.locals может дополнительно содержать аутентифицированный экземпляр приложения Firebase ( firebaseApp ) и текущего вошедшего в систему пользователя ( currentUser ). Это можно внедрить в ваш модуль с помощью токена REQUEST (экспортируемого из @nguniversal/express-engine/tokens).