Integra angolare universale

Con la CLI compatibile con il framework Firebase, puoi distribuire la tua applicazione Angular su Firebase e fornire contenuti dinamici ai tuoi utenti.

Prima di iniziare

Prima di iniziare a distribuire la tua app su Firebase, esamina i seguenti requisiti e opzioni:

  • CLI Firebase versione 12.1.0 o successiva. Assicurati di installare la CLI utilizzando il tuo metodo preferito.
  • Facoltativo: fatturazione abilitata sul tuo progetto Firebase (obbligatorio se prevedi di utilizzare SSR)

  • Opzionale: AngularFire

Inizializza Firebase

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

Inizializzare un nuovo progetto

  1. Nella CLI di Firebase, abilita l'anteprima dei framework Web:
    firebase experiments:enable webframeworks
  2. Eseguire il comando di inizializzazione dalla CLI e quindi seguire le istruzioni:

    firebase init hosting

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

  4. Scegli la directory di origine del tuo hosting; questa potrebbe essere un'app Angular esistente.

  5. Se richiesto, scegli Angolare.

Inizializza un progetto esistente

Modifica la configurazione del tuo hosting in firebase.json per avere un'opzione source , anziché un'opzione public . Per esempio:

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

Offri contenuto statico

Dopo aver inizializzato Firebase, puoi fornire contenuto statico con il comando di distribuzione standard:

firebase deploy

Pre-renderizzare il contenuto dinamico

Per eseguire il prerendering del contenuto dinamico in Angular, è necessario configurare Angular Universal. La CLI Firebase prevede Express Engine:

ng add @nguniversal/express-engine

Consulta la guida Angular Universal per ulteriori informazioni.

Aggiungi URL di prerendering

Per impostazione predefinita, verrà prerenderizzato solo la directory root. Puoi aggiungere ulteriori percorsi individuando la fase di prerendering in angular.json e aggiungendo altri percorsi:

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

Firebase rispetta anche guessRoutes o un file routes.txt nella root dell'hosting, se è necessario personalizzare ulteriormente. Consulta la guida al prerendering di Angular per ulteriori informazioni su queste opzioni.

Facoltativo: aggiungere un modulo server

Distribuire

Quando esegui la distribuzione con firebase deploy , Firebase crea il pacchetto browser, il pacchetto server ed esegue il prerendering dell'applicazione. Questi elementi vengono distribuiti su Hosting e Cloud Functions for Firebase.

Distribuzione personalizzata

La CLI di Firebase presuppone che siano presenti passaggi di server, creazione e prerendering negli schemi con una configurazione di produzione.

Se desideri personalizzare i presupposti della CLI, configura ng deploy e modifica la configurazione in angular.json . Ad esempio, potresti disabilitare SSR e fornire contenuti pre-renderizzati esclusivamente rimuovendo serverTarget :

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

Facoltativo: integrazione con Firebase JS SDK

Quando includi i metodi Firebase JS SDK 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: integrazione con Firebase Admin SDK

I bundle di amministrazione falliranno se sono inclusi nella build del tuo browser, quindi considera di fornirli nel modulo server e di inserirli come dipendenza opzionale:

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

Offri contenuti completamente dinamici con SSR

Facoltativo: integrazione con l'autenticazione Firebase

Gli strumenti di distribuzione Firebase compatibili con 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 autenticata dell'app Firebase ( firebaseApp ) e l'utente attualmente connesso ( currentUser ). Questo può essere inserito nel tuo modulo tramite il token REQUEST (esportato da @nguniversal/express-engine/tokens).