Integrar o Angular Universal

Com a CLI com reconhecimento de framework do Firebase, é possível implantar o aplicativo Angular no Firebase e disponibilizar conteúdo dinâmico para os usuários.

Antes de começar

Antes de começar a implantação do app no Firebase, confira os seguintes requisitos e opções:

  • CLI do Firebase versão 12.1.0 ou mais recente. Instale a CLI usando seu método preferido.

  • Opcional: ative o faturamento no seu projeto do Firebase (obrigatório se você planeja usar a SSR).

  • Opcional: AngularFire.

Inicializar o Firebase

Para começar, inicialize o Firebase para seu projeto de framework. Use a CLI do Firebase para um novo projeto ou modifique firebase.json para um projeto que já existe.

Inicializar um novo projeto

  1. Na CLI do Firebase, ative a visualização de frameworks da Web: 
    firebase experiments:enable webframeworks

  2. Execute o comando de inicialização da CLI e siga as instruções: 

    firebase init hosting

  3. Responda "Sim" para "Você quer usar uma estrutura da Web?" (experimental)

  4. Escolha o diretório de origem da hospedagem (pode ser um app Angular que já existe).

  5. Se necessário, escolha o Angular.

Inicializar um projeto que já existe

Altere a configuração de hospedagem em firebase.json para que haja uma opção source, em vez de uma opção public. Exemplo:

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

Disponibilizar conteúdo estático

Depois de inicializar o Firebase, exiba conteúdos estáticos com o comando de implantação padrão:

firebase deploy

Pré-renderizar conteúdo dinâmico

Para pré-renderizar o conteúdo dinâmico no Angular, é necessário configurar o Angular Universal. A CLI do Firebase espera o Express Engine:

ng add @nguniversal/express-engine

Consulte o guia universal do Angular (em inglês) para mais informações.

Adicionar URLs de pré-renderização

Por padrão, somente o diretório raiz será pré-renderizado. Para adicionar outras rotas, localize a etapa de pré-renderização no angular.json e adicione mais rotas:

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

O Firebase também respeita guessRoutes ou um arquivo routes.txt na raiz de hospedagem, se você precisar personalizar mais. Consulte o guia de pré-renderização do Angular (em inglês) para mais informações sobre essas opções.

Opcional: adicionar um módulo de servidor

Implantar

Quando você implanta com firebase deploy, o Firebase cria o pacote de navegador e o pacote de servidor, bem como pré-renderiza o aplicativo. Esses elementos são implantados no Hosting e no Cloud Functions para Firebase.

Implantação personalizada

A CLI do Firebase pressupõe que você tenha as etapas de servidor, criação e pré-renderização nos esquemas com uma configuração de produção.

Se você quiser personalizar as suposições da CLI, defina ng deploy e edite a configuração em angular.json. Por exemplo, é possível desativar a SSR e disponibilizar conteúdo pré-renderizado exclusivamente removendo serverTarget:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

Opcional: integrar com o SDK do Firebase para JavaScript

Ao incluir métodos do SDK do Firebase para JavaScript nos pacotes do servidor e do cliente, proteja contra os erros de execução verificando isSupported() antes de usar o produto. Nem todos os produtos são compatíveis com todos os ambientes.

Opcional: integrar com o SDK Admin do Firebase

Os pacotes de administrador falharão se estiverem incluídos no build do navegador. Portanto, considere fornecer os pacotes no módulo do servidor e injetar como uma dependência opcional:

// 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');

Exibir conteúdo totalmente dinâmico com a SSR

Opcional: integrar com o Firebase Authentication

As ferramentas de implantação do Firebase com reconhecimento de framework da Web usam cookies para manter automaticamente o estado do cliente e do servidor em sincronia. O objeto res.locals do Express pode conter uma instância autenticada do app do Firebase (firebaseApp) e o usuário conectado (currentUser). Isso pode ser injetado no módulo pelo token REQUEST (exportado de @nguniversal/express-engine/tokens).