Integrar Angular Universal

Com a CLI compatível com a estrutura do Firebase, você pode implantar seu aplicativo Angular no Firebase e fornecer conteúdo dinâmico aos seus usuários.

Antes de você começar

Antes de começar a implantar seu aplicativo no Firebase, revise os seguintes requisitos e opções:

  • CLI do Firebase versão 12.1.0 ou posterior. Certifique-se de instalar a CLI usando seu método preferido.

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

  • Opcional: AngularFire

Inicializar Firebase

Para começar, inicialize o Firebase para seu projeto de estrutura. Use a Firebase CLI para um novo projeto ou modifique firebase.json para um projeto existente.

Inicialize um novo projeto

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

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

    firebase init hosting

  3. Responda sim para "Deseja usar um framework web? (experimental)"

  4. Escolha o diretório de origem da hospedagem; este poderia ser um aplicativo Angular existente.

  5. Se solicitado, escolha Angular.

Inicializar um projeto existente

Altere sua configuração de hospedagem em firebase.json para ter uma opção source , em vez de uma opção public . Por exemplo:

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

Servir conteúdo estático

Depois de inicializar o Firebase, você pode fornecer conteúdo estático com o comando de implantação padrão:

firebase deploy

Pré-renderizar conteúdo dinâmico

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

ng add @nguniversal/express-engine

Consulte o guia Angular Universal para obter mais informações.

Adicionar URLs de pré-renderização

Por padrão, apenas o diretório raiz será pré-renderizado. Você pode adicionar rotas adicionais localizando a etapa de pré-renderização em angular.json e adicionando 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 da hospedagem, se você precisar personalizar ainda mais. Consulte o guia de pré-renderização do Angular para obter mais informações sobre essas opções.

Opcional: adicione um módulo de servidor

Implantar

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

Implantação personalizada

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

Se você quiser personalizar as suposições da CLI, configure ng deploy e edite a configuração em angular.json . Por exemplo, você poderia desabilitar o SSR e servir 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: integre com o SDK JS do Firebase

Ao incluir métodos do Firebase JS SDK em pacotes de servidor e cliente, proteja-se contra erros de tempo de execução verificando isSupported() antes de usar o produto. Nem todos os produtos são suportados em todos os ambientes .

Opcional: integre com o SDK Admin do Firebase

Os pacotes de administração falharão se forem incluídos na compilação do seu navegador, então considere fornecê-los no módulo do servidor e injetá-los 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');

Sirva conteúdo totalmente dinâmico com SSR

Opcional: integre com o Firebase Authentication

As ferramentas de implantação do Firebase com reconhecimento de estrutura da web mantêm automaticamente o estado do cliente e do servidor sincronizados usando cookies. O objeto Express res.locals conterá opcionalmente uma instância autenticada do aplicativo Firebase ( firebaseApp ) e o usuário atualmente conectado ( currentUser ). Isso pode ser injetado em seu módulo por meio do token REQUEST (exportado de @nguniversal/express-engine/tokens).