Integra angolare universale

Con la CLI Firebase compatibile con il framework, 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:

  • Firebase CLI 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)

  • Facoltativo: AngularFire

Inizializza Firebase

Per iniziare, inizializza Firebase per il tuo progetto framework. Utilizza l'interfaccia a riga di comando di Firebase per un nuovo progetto o modifica firebase.json per un progetto esistente.

Inizializza 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 usare un framework web? (sperimentale)"

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

  5. Se richiesto, scegli Angolare.

Inizializza un progetto esistente

Modifica la tua configurazione di hosting in firebase.json per avere un'opzione source , piuttosto che un'opzione public . Per esempio:

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

Servi contenuti statici

Dopo aver inizializzato Firebase, puoi pubblicare contenuti statici con il comando di distribuzione standard:

firebase deploy

Eseguire il pre-rendering dei contenuti dinamici

Per eseguire il prerendering di contenuto dinamico in Angular, devi configurare Angular Universal. L'interfaccia a riga di comando di Firebase prevede Express Engine:

ng add @nguniversal/express-engine

Consulta la guida di Angular Universal per ulteriori informazioni.

Aggiungi URL di prerendering

Per impostazione predefinita, verrà eseguito il prerendering solo della directory radice. Puoi aggiungere percorsi aggiuntivi individuando il passaggio 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 di hosting, se è necessario personalizzare ulteriormente. Consulta la guida al prerendering di Angular per ulteriori informazioni su tali opzioni.

Facoltativo: aggiungi un modulo server

Distribuisci

Quando esegui la distribuzione con firebase deploy , Firebase crea il bundle del browser, il bundle del server e esegue il prerendering dell'applicazione. Questi elementi vengono distribuiti a Hosting e Cloud Functions per Firebase.

Distribuzione personalizzata

L'interfaccia a riga di comando di Firebase presuppone che tu abbia passaggi di server, build e prerendering nei tuoi 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, puoi disabilitare SSR e pubblicare 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 l'SDK JS di Firebase

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

I bundle di amministrazione falliranno se sono inclusi nella build del tuo browser, quindi considera di fornirli nel tuo modulo server e di iniettarli 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');

Offri contenuti completamente dinamici con SSR

Facoltativo: integrazione con Firebase Authentication

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 dell'app Firebase 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).