Integrare Angular

Gestisci contenuti statici

Puoi gestire contenuti statici con il comando di deployment standard:

firebase deploy

Esegui il pre-rendering dei contenuti dinamici

Per eseguire il pre-rendering dei contenuti dinamici in Angular, devi configurare Angular SSR.

ng add @angular/ssr

Per ulteriori informazioni, consulta la guida al pre-rendering (SSG) di Angular.

(Facoltativo) Aggiungi un modulo server

Esegui il deployment

Quando esegui il deployment con firebase deploy, Firebase crea il bundle del browser, il bundle del server ed esegue il pre-rendering dell'applicazione. Questi elementi vengono sottoposti a deployment in Hosting e Cloud Functions for Firebase.

Deployment personalizzato

L'Firebase interfaccia a riga di comando presuppone che tu abbia una singola applicazione definita in angular.json con una configurazione di compilazione di produzione.

Se devi personalizzare le ipotesi dell'interfaccia a riga di comando, puoi utilizzare la FIREBASE_FRAMEWORKS_BUILD_TARGET variabile di ambiente o aggiungere AngularFire e modificare il tuo angular.json:

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

(Facoltativo) Integra l'SDK Firebase JS

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

(Facoltativo) Integra l'SDK Firebase Admin

I bundle di amministrazione non verranno creati 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');

Gestisci contenuti completamente dinamici con SSR

(Facoltativo) Integra Firebase Authentication

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