Integra Angular Universal

Con la CLI de Firebase compatible con el framework, puedes implementar tu aplicación de Angular en Firebase y entregar contenido dinámico a los usuarios.

Antes de comenzar

Antes de comenzar a implementar tu app en Firebase, revisa los siguientes requisitos y opciones:

  • Versión 12.1.0 o posterior de Firebase CLI. Asegúrate de instalar la CLI con el método que prefieras.

  • Opcional: Ten la facturación habilitada en tu proyecto de Firebase (obligatoria si planeas usar SSR)

  • Opcional: AngularFire

Inicializa Firebase

A fin de comenzar, inicializa Firebase para tu proyecto de framework. Usa Firebase CLI para un proyecto nuevo o modifica firebase.json en un proyecto existente.

Inicializa un proyecto nuevo

  1. En Firebase CLI, habilita la vista previa de frameworks web:
    firebase experiments:enable webframeworks

  2. Ejecuta el comando de inicialización desde la CLI y, luego, sigue las indicaciones: 

    firebase init hosting

  3. Responde Sí a la pregunta “¿Quieres usar un framework web? (experimental)”

  4. Elige el directorio del código fuente para hosting, que podría ser una app de Angular existente.

  5. Si se te solicita, elige Angular.

Inicializa un proyecto existente

Cambia la configuración de hosting en firebase.json para que tenga una opción source, en lugar de una opción public. Por ejemplo:

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

Entrega contenido estático

Después de inicializar Firebase, 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 Universal. Firebase CLI requiere Express Engine:

ng add @nguniversal/express-engine

Consulta la guía de Angular Universal para obtener más información.

Agrega URLs con renderización previa

De forma predeterminada, solo se renderizará previamente el directorio raíz. Para agregar rutas adicionales, busca el paso de renderización previa en angular.json y agrega más:

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

En caso de que necesites personalizarlo aún más, Firebase también admite guessRoutes o un archivo routes.txt en la raíz del hosting. Consulta la guía de renderización previa de Angular para obtener más información sobre esas opciones.

Agrega un módulo de servidor (opcional)

Realiza la implementación

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 para Firebase.

Realiza una implementación personalizada

En Firebase CLI se supone que seguiste los pasos de servidor, de compilación y de renderización previa en tus esquemas con una configuración de producción.

Si deseas adaptar las suposiciones de CLI, configura ng deploy y edita la configuración en angular.json. Por ejemplo, puedes inhabilitar SSR y entregar contenido renderizado previamente de forma exclusiva si quitas serverTarget:

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

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