Integrare Angular

Pubblicare contenuti statici

Puoi pubblicare contenuti statici con il comando di deployment standard:

firebase deploy

Pre-rendering dei contenuti dinamici

Per eseguire il prerendering dei contenuti dinamici in Angular, devi configurare Angular SSR.

ng add @angular/ssr

Per saperne di più, consulta la guida al prerendering di Angular (SSG).

(Facoltativo) Aggiungi un modulo server

Esegui deployment

Quando esegui il deployment con firebase deploy, Firebase crea il bundle del browser, il bundle del server e il prerendering dell'applicazione. Questi elementi vengono implementati in Hosting e Cloud Functions for Firebase.

Deployment personalizzato

La CLI Firebase presuppone che tu abbia una singola applicazione definita in angular.json con una configurazione di build di produzione.

Se devi adattare le ipotesi della CLI, puoi utilizzare la variabile di ambiente FIREBASE_FRAMEWORKS_BUILD_TARGET o aggiungere AngularFire e modificare angular.json:

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

(Facoltativo) Eseguire l'integrazione con l'SDK Firebase JS

Quando includi i metodi dell'SDK Firebase JS sia nei bundle server che client, proteggiti dagli errori di runtime controllando isSupported() prima di utilizzare il prodotto. Non tutti i prodotti sono supportati in tutti gli ambienti.

(Facoltativo) Integrare l'SDK Firebase Admin

I bundle di amministrazione non funzioneranno se sono inclusi nella build del browser, quindi valuta la possibilità di fornirli nel modulo del server e di inserirli come dipendenza facoltativa:

// 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');

Pubblicare contenuti completamente dinamici con il rendering lato server

(Facoltativo) Integrare con Firebase Authentication

Gli strumenti di deployment di Firebase che riconoscono i framework web mantengono automaticamente sincronizzati lo stato del client e del server utilizzando i cookie. L'oggetto Express res.locals conterrà facoltativamente un'istanza Firebase App autenticata (firebaseApp) e l'utente attualmente connesso (currentUser). Questo può essere inserito nel tuo modulo tramite il token REQUEST (esportato da @nguniversal/express-engine/tokens).