Intégrer Angular Universal

Avec la CLI compatible avec le framework Firebase, vous pouvez déployer votre application Angular sur Firebase et proposer du contenu dynamique à vos utilisateurs.

Avant que tu commences

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

Firebase CLI version 12.1.0 ou ultérieure. Assurez-vous d' installer la CLI en utilisant votre méthode préférée.
Facultatif : facturation activée sur votre projet Firebase (obligatoire si vous prévoyez d'utiliser 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

Dans la CLI Firebase, activez l'aperçu des frameworks Web :
```
firebase experiments:enable webframeworks
```
Exécutez la commande d'initialisation à partir de la CLI, puis suivez les invites :
```
firebase init hosting
```
Répondez oui à la question "Voulez-vous utiliser un framework web ? (expérimental)"
Choisissez votre répertoire source d'hébergement ; cela pourrait être une application angulaire existante.
Si vous y êtes invité, choisissez Angulaire.

Initialiser un projet existant

Modifiez votre configuration d'hébergement dans firebase.json pour avoir une option source plutôt qu'une option public . Par exemple:

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

Servir du contenu statique

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

firebase deploy

Pré-rendu du contenu dynamique

Pour pré-afficher du contenu dynamique dans Angular, vous devez configurer Angular Universal. La CLI Firebase attend Express Engine :

ng add @nguniversal/express-engine

Consultez le guide Angular Universal pour plus d’informations.

Ajouter des URL de pré-affichage

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

{
  "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 de l'hébergement, si vous devez personnaliser davantage. Consultez le guide de prérendu d'Angular pour plus d'informations sur ces options.

Facultatif : ajouter un module 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 sur Hosting et Cloud Functions pour Firebase.

Déploiement personnalisé

La CLI Firebase suppose que vous disposez d'étapes de serveur, de création 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 SSR et diffuser du contenu pré-rendu exclusivement en supprimant serverTarget :

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

Facultatif : intégration avec le SDK Firebase JS

Lorsque vous incluez les méthodes du SDK Firebase JS 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 pris en charge dans tous les environnements .

Facultatif : intégration avec le SDK d'administration Firebase

Les bundles d'administration échoueront s'ils sont inclus dans la version de votre navigateur, alors pensez à les fournir dans votre module serveur et à 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');

Diffusez du contenu entièrement dynamique avec SSR

Facultatif : intégration avec l'authentification Firebase

L'outil de déploiement Firebase compatible avec le framework Web maintient automatiquement l'état du client et du serveur synchronisé à l'aide de cookies. L'objet Express res.locals contiendra éventuellement une instance d'application Firebase authentifiée ( firebaseApp ) et l'utilisateur actuellement connecté ( currentUser ). Celui-ci peut être injecté dans votre module via le token REQUEST (exporté depuis @nguniversal/express-engine/tokens).