Integrar Angular Universal

Con la CLI compatible con el marco de Firebase, puede implementar su aplicación Angular en Firebase y ofrecer contenido dinámico a sus usuarios.

Antes de que empieces

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

  • Firebase CLI versión 12.1.0 o posterior. Asegúrese de instalar la CLI utilizando su método preferido.

  • Opcional: Facturación habilitada en tu proyecto de Firebase (obligatorio si planeas usar SSR)

  • Opcional: Fuego Angular

Inicializar base de fuego

Para comenzar, inicializa Firebase para tu proyecto marco. Utilice Firebase CLI para un proyecto nuevo o modifique firebase.json para un proyecto existente.

Inicializar un nuevo proyecto

  1. En Firebase CLI, habilite la vista previa de los marcos web:
    firebase experiments:enable webframeworks

  2. Ejecute el comando de inicialización desde la CLI y luego siga las indicaciones:

    firebase init hosting

  3. Responda sí a "¿Quiere utilizar un marco web? (experimental)"

  4. Elija su directorio de origen de alojamiento; Esta podría ser una aplicación Angular existente.

  5. Si se le solicita, elija Angular.

Inicializar un proyecto existente

Cambie su configuración de alojamiento en firebase.json para tener una opción source , en lugar de una opción public . Por ejemplo:

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

Servir contenido estático

Después de inicializar Firebase, puedes ofrecer contenido estático con el comando de implementación estándar:

firebase deploy

Contenido dinámico previo al renderizado

Para prerenderizar contenido dinámico en Angular, debe configurar Angular Universal. Firebase CLI espera Express Engine:

ng add @nguniversal/express-engine

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

Agregar URL de prerenderizado

De forma predeterminada, solo se prerenderizará el directorio raíz. Puede agregar rutas adicionales ubicando el paso previo a la renderización en angular.json y agregando más rutas:

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

Firebase también respeta guessRoutes o un archivo routes.txt en la raíz del alojamiento, si necesita personalizarlo más. Consulte la guía de renderizado previo de Angular para obtener más información sobre esas opciones.

Opcional: agregue un módulo de servidor

Desplegar

Cuando implementas con firebase deploy , Firebase crea tu paquete de navegador, tu paquete de servidor y preprocesa la aplicación. Estos elementos se implementan en Hosting y Cloud Functions para Firebase.

Implementación personalizada

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

Si desea personalizar las suposiciones de la CLI, configure ng deploy y edite la configuración en angular.json . Por ejemplo, puede deshabilitar SSR y ofrecer contenido pre-renderizado exclusivamente eliminando serverTarget :

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

Opcional: integración con Firebase JS SDK

Al incluir métodos del SDK de Firebase JS en paquetes de servidor y de cliente, protéjase contra errores de tiempo de ejecución marcando isSupported() antes de usar el producto. No todos los productos son compatibles con todos los entornos .

Opcional: integración con el SDK de administración de Firebase

Los paquetes de administración fallarán si se incluyen en la compilación de su navegador, así que considere proporcionarlos en su módulo de servidor e inyectarlos 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');

Ofrezca contenido totalmente dinámico con SSR

Opcional: integrar con Firebase Authentication

Las herramientas de implementación de Firebase compatibles con el marco web mantienen sincronizados automáticamente el estado del cliente y del servidor mediante cookies. El objeto Express res.locals contendrá opcionalmente una instancia de Firebase App autenticada ( firebaseApp ) y el usuario actualmente registrado ( currentUser ). Esto se puede inyectar en su módulo a través del token REQUEST (exportado desde @nguniversal/express-engine/tokens).