Intégrer Angular Universal

Avec la CLI compatible avec le framework Firebase, vous pouvez déployer votre application Angular sur Firebase et diffuser du contenu dynamique auprès de vos utilisateurs.

Avant de commencer

Avant de commencer à déployer votre application sur Firebase, consultez les exigences et les options suivantes:

  • Firebase CLI version 12.1.0 ou ultérieure Veillez à installer la CLI à l'aide de la méthode de votre choix.

  • Facultatif: la facturation est activée dans votre projet Firebase (obligatoire si vous prévoyez d'utiliser le SSR)

  • Facultatif: AngularFire

Initialiser Firebase

Pour commencer, initialisez Firebase pour votre projet de framework. Utilisez la CLI Firebase pour un nouveau projet ou modifiez firebase.json pour un projet existant.

Initialiser un nouveau projet

  1. Dans la CLI Firebase, activez l'aperçu des frameworks Web: 
    firebase experiments:enable webframeworks

  2. Exécutez la commande d'initialisation à partir de la CLI, puis suivez les instructions: 

    firebase init hosting

  3. Répondez "Oui" à la question "Voulez-vous utiliser un framework Web ? (expérimental)"

  4. Choisissez le répertoire source d'hébergement. Il peut s'agir d'une application Angular existante.

  5. Si vous y êtes invité, sélectionnez Angular.

Initialiser un projet existant

Modifiez la configuration d'hébergement dans firebase.json pour utiliser une option source plutôt qu'une option public. Exemple :

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

Diffuser du contenu statique

Après avoir initialisé Firebase, vous pouvez diffuser du contenu statique à l'aide de la commande de déploiement standard:

firebase deploy

Prérendre du contenu dynamique

Pour prérendre du contenu dynamique dans Angular, vous devez configurer Angular Universal. La CLI Firebase s'attend à ce que Express Engine:

ng add @nguniversal/express-engine

Pour en savoir plus, consultez le guide Angular Universal.

Ajouter des URL de préchargement

Par défaut, seul le répertoire racine est prérendu. Vous pouvez ajouter des routes supplémentaires en localisant l'étape de prérendu dans angular.json et en ajoutant d'autres routes:

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

Firebase respecte également guessRoutes ou un fichier routes.txt dans la racine d'hébergement, si vous devez effectuer d'autres personnalisations. Pour en savoir plus sur ces options, consultez le guide de préchargement d'Angular.

Facultatif: ajouter un module de serveur

Déployer

Lorsque vous déployez avec firebase deploy, Firebase crée votre bundle de navigateur, votre bundle de serveur et prérend l'application. Ces éléments sont déployés dans Hosting et Cloud Functions for Firebase.

Déploiement personnalisé

La CLI Firebase suppose que vous disposez d'étapes de serveur, de compilation et de prérendu dans vos schémas avec une configuration de production.

Si vous souhaitez adapter les hypothèses de la CLI, configurez ng deploy et modifiez la configuration dans angular.json. Par exemple, vous pouvez désactiver le SSR et diffuser exclusivement du contenu pré-rendu en supprimant serverTarget:

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

(Facultatif) Intégrez le SDK Firebase JS.

Lorsque vous incluez des méthodes du SDK JS Firebase dans les bundles serveur et client, protégez-vous contre les erreurs d'exécution en vérifiant isSupported() avant d'utiliser le produit. Tous les produits ne sont pas compatibles avec tous les environnements.

Facultatif: Intégration au SDK Firebase Admin

Les bundles d'administration échoueront s'ils sont inclus dans votre build du navigateur. Envisagez donc de les fournir dans votre module serveur et de les injecter en tant que dépendance facultative:

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

Diffuser du contenu entièrement dynamique avec le SSR

Facultatif: Intégrer à Firebase Authentication

Les outils de déploiement Firebase compatibles avec le framework Web synchronisent automatiquement l'état du client et du serveur à l'aide de cookies. L'objet res.locals Express peut contenir une instance d'application Firebase authentifiée (firebaseApp) et l'utilisateur actuellement connecté (currentUser). Vous pouvez les injecter dans votre module via le jeton REQUEST (exporté depuis @nguniversal/express-engine/tokens).