Integrar o Angular

Disponibilizar conteúdo estático

É possível exibir conteúdo estático 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 SSR.

ng add @angular/ssr

Consulte o guia de pré-renderização do Angular (SSG) para mais informaçõ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 em Hosting e Cloud Functions for Firebase.

Implantação personalizada

A CLI do Firebase pressupõe que você tenha um único aplicativo definido no seu angular.json com uma configuração do build de produção.

Se precisar adaptar as proposições da CLI, use a variável de ambiente FIREBASE_FRAMEWORKS_BUILD_TARGET ou adicione AngularFire e modifique o angular.json:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "version": 2,
      "buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
    }
  }
}

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).