Integra Angular

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