Integrare Angular Universal

Con l'interfaccia a riga di comando di Firebase consapevole del framework, puoi eseguire il deployment della tua 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 l'interfaccia a riga di comando utilizzando il metodo che preferisci.

  • (Facoltativo) Fatturazione abilitata nel progetto Firebase (obbligatoria se prevedi di utilizzare SSR)

  • (Facoltativo) AngularFire

Inizializza Firebase

Per iniziare, inizializza Firebase per il progetto del framework. Utilizza l'interfaccia a riga di comando 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 dall'interfaccia a riga di comando 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, che potrebbe essere un'app Angular esistente.

  5. Se richiesto, scegli Angular.

Inizializzare un progetto esistente

Modifica la configurazione di hosting in firebase.json in modo da avere un'opzione source anziché un'opzione public. Ad esempio:

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

Pubblicazione di 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 Universal. L'interfaccia a riga di comando Firebase si aspetta Express Engine:

ng add @nguniversal/express-engine

Per ulteriori informazioni, consulta la guida di Angular Universal.

Aggiungi URL di prerendering

Per impostazione predefinita, verrà eseguito il prerendering solo della directory principale. Puoi aggiungere altri route individuando il passaggio di prerendering in angular.json e aggiungendo altri route:

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

Firebase rispetta anche guessRoutes o un file routes.txt nella directory principale dell'hosting, se hai bisogno di personalizzare ulteriormente. Per ulteriori informazioni su queste opzioni, consulta la guida al prerendering di Angular.

(Facoltativo) Aggiungi un modulo del server

Esegui deployment

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

Deployment personalizzato

L'interfaccia a riga di comando Firebase presuppone che tu abbia i passaggi di server, build e prerendering nelle tue schemi con una configurazione di produzione.

Se vuoi personalizzare le ipotesi dell'interfaccia a riga di comando, configura ng deploy e modifica la configurazione in angular.json. Ad esempio, puoi disattivare l'SSR e pubblicare esclusivamente contenuti pre-renderizzati rimuovendo serverTarget:

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

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

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

(Facoltativo) Esegui l'integrazione con l'SDK Firebase Admin

I bundle di amministrazione non funzioneranno se sono inclusi nella compilazione del browser, quindi ti consigliamo 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 SSR

(Facoltativo) Esegui l'integrazione con Firebase Authentication

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