Интеграция Angular Universal

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

ng add @nguniversal/express-engine

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

Добавить URL-адреса предварительной визуализации

По умолчанию будет предварительно отрендерен только корневой каталог. Вы можете добавить дополнительные маршруты, найдя шаг prerender в angular.json и добавив больше маршрутов:

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

Firebase также учитывает guessRoutes или файл routes.txt в корне хостинга, если вам нужно настроить его более подробно. См. руководство по предварительной визуализации Angular для получения дополнительной информации об этих опциях.

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

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

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