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

С помощью интерфейса командной строки, поддерживающего фреймворк 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 SSR.

ng add @angular/ssr

Более подробную информацию см. в руководстве Angular Prerendering (SSG) .

Необязательно: добавьте серверный модуль

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

При развертывании с помощью firebase deploy Firebase собирает ваш браузерный и серверный пакеты, а также выполняет предварительную визуализацию приложения. Эти элементы развертываются в Hosting and 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

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