Integrare Angular

Con l'interfaccia a riga di comando di Firebase compatibile con i framework, puoi eseguire il deployment dell'applicazione Angular su Firebase e pubblicare contenuti dinamici per i tuoi utenti.

Prima di iniziare

Prima di iniziare a eseguire il deployment dell'app su Firebase, esamina i seguenti requisiti e opzioni:

  • Firebase CLI versione 12.1.0 o successive. Assicurati di installare la CLI utilizzando il tuo metodo preferito.

  • (Facoltativo) Fatturazione abilitata nel tuo progetto Firebase (obbligatorio se prevedi di utilizzare il rendering lato server)

  • (Facoltativo) AngularFire

Inizializza Firebase

Per iniziare, inizializza Firebase per il progetto del framework. Utilizza la CLI Firebase per un nuovo progetto o modifica firebase.json per un progetto esistente.

Inizializzare un nuovo progetto

  1. Nell'interfaccia a riga di comando Firebase, attiva l'anteprima dei framework web: 
    firebase experiments:enable webframeworks

  2. Esegui il comando di inizializzazione dalla CLI e segui le istruzioni: 

    firebase init hosting

  3. Rispondi sì alla domanda "Vuoi utilizzare un framework web? (sperimentale)"

  4. Scegli la directory di origine dell'hosting. Potrebbe trattarsi di un'app Angular esistente.

  5. Se richiesto, scegli Angular.

Inizializzare un progetto esistente

Modifica la configurazione dell'hosting in firebase.json per avere un'opzione source anziché un'opzione public. Ad esempio:

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

Pubblicare contenuti statici

Dopo aver inizializzato Firebase, 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 ulteriori informazioni, consulta la guida al prerendering (SSG) di Angular.

(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 in quelli 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 compatibili con 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).