Integra Angular

Entrega contenido estático

Puedes entregar contenido estático con el siguiente comando de implementación estándar:

firebase deploy

Renderiza previamente el contenido dinámico

Para renderizar previamente el contenido dinámico en Angular, debes configurar Angular SSR.

ng add @angular/ssr

Consulta la guía de renderización previa de Angular (SSG) para obtener más información.

Agrega un módulo de servidor (opcional)

Implementar

Cuando realizas una implementación con firebase deploy, Firebase compila el paquete del navegador y del servidor, y realiza una renderización previa de la aplicación. Estos elementos se implementan en Hosting y Cloud Functions for Firebase.

Realiza una implementación personalizada

En Firebase CLI se supone que tienes una sola aplicación definida en tu angular.json con una configuración de compilación de producción.

Si necesitas adaptar las suposiciones de la CLI, puedes usar la variable de entorno FIREBASE_FRAMEWORKS_BUILD_TARGET o agregar AngularFire y modificar tu angular.json:

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

Realiza integraciones en el SDK de Firebase JS (opcional)

Cuando incluyas los métodos del SDK de Firebase JS en paquetes de clientes y de servidor, revisa isSupported() antes de usar el producto para protegerte de los errores del entorno de ejecución. No todos los productos son compatibles con todos los entornos.

Realiza integraciones en el SDK de Firebase Admin (opcional)

Los paquetes de administración fallarán si se incluyen en la compilación de tu navegador, por lo que debes considerar proporcionarlos en tu módulo del servidor y aplicarlos como una dependencia 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');

Publica contenido completamente dinámico con SSR

Realiza la integración en Firebase Authentication (opcional)

La herramienta de implementación de Firebase compatible con framework web mantiene automáticamente el estado del cliente y del servidor sincronizados mediante el uso de cookies. El objeto res.locals de Express contendrá de manera opcional una instancia autenticada de la app de Firebase (firebaseApp) y el usuario que inició la sesión (currentUser). Estos datos se pueden insertar en tu módulo a través del token REQUEST (exportado desde @nguniversal/express-engine/tokens).