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

С помощью CLI, совместимого с фреймворком Firebase, вы можете развернуть свое приложение Angular в Firebase и предоставлять пользователям динамический контент.

Прежде чем начать

Прежде чем приступить к развертыванию приложения в Firebase, ознакомьтесь со следующими требованиями и параметрами:

  • Firebase CLI версии 12.1.0 или более поздней. Убедитесь, что вы установили CLI выбранным вами способом.

  • Необязательно: включите оплату в вашем проекте Firebase (обязательно, если вы планируете использовать SSR).

  • Дополнительно: AngularFile

Инициализация Firebase

Для начала инициализируйте Firebase для вашего проекта на основе фреймворка. Используйте Firebase CLI для нового проекта или измените firebase.json для существующего проекта.

Инициализировать новый проект

  1. В интерфейсе командной строки Firebase включите предварительный просмотр веб-фреймворков: 
    firebase experiments:enable webframeworks

  2. Выполните команду инициализации из командной строки, а затем следуйте инструкциям:

    firebase init hosting

  3. Ответьте «да» на вопрос «Хотите ли вы использовать веб-фреймворк? (экспериментальный)»

  4. Выберите каталог с исходным кодом вашего хостинга; это может быть уже существующее приложение Angular.

  5. Если появится запрос, выберите Angular.

Инициализировать существующий проект

Измените конфигурацию хостинга в файле firebase.json , указав в качестве параметра source ), а не public ). Например:

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

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

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

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).