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

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

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

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

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

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

• Необязательно: AngularFire

Инициализировать Firebase

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

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

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

   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-адреса предварительной обработки

По умолчанию предварительно визуализируется только корневой каталог. Вы можете добавить дополнительные маршруты, найдя этап предварительной визуализации в 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 и Cloud Functions for Firebase .

Пользовательское развертывание

Интерфейс командной строки Firebase предполагает, что в вашей схеме с производственной конфигурацией есть этапы сервера, сборки и предварительной визуализации.

Если вы хотите адаптировать предположения 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.

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