Integrare Angular

Gestire contenuti statici

Puoi gestire contenuti statici con il comando di deployment standard:

firebase deploy

Pre-rendering di contenuti dinamici

Per eseguire il pre-rendering di 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) Aggiungere 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

La Firebase CLI presuppone che tu abbia una singola applicazione definita in angular.json con una configurazione di compilazione di produzione.

Se devi personalizzare i presupposti della CLI, 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) Integrare con Firebase JS SDK

Quando includi i metodi Firebase JS SDK 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) Integrare con 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 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');

Gestire contenuti completamente dinamici con SSR

(Facoltativo) Integrare con Firebase Authentication

Lo strumento di deployment di Firebase con riconoscimento del framework web mantiene 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).