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 à vos utilisateurs.

Remarque : L'hébergement compatible avec le framework est une version préliminaire publique. Cela signifie que la fonctionnalité peut changer de manière incompatible avec les versions antérieures. Une version préliminaire n'est soumise à aucun contrat de niveau de service ou politique d'obsolescence et peut bénéficier d'une assistance limitée ou inexistante.

Avant que tu commences

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

• Firebase CLI version 11.14.2 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

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 invites :

   firebase init hosting

3. Choisissez votre répertoire source d'hébergement ; cela pourrait être une application angulaire existante.
4. Choisissez "Hébergement Web dynamique avec framework Web".
5. 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é-rendre du contenu dynamique dans Angular, vous devez configurer Angular Universal. La CLI Firebase s'attend à ce qu'Express Engine :

ng add @nguniversal/express-engine

Consultez le guide Angular Universal pour plus d'informations.

Ajouter des URL de prérendu

Par défaut, seul le répertoire racine sera 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 à la racine de l'hébergement, si vous avez besoin de personnaliser davantage. Voir 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 avez des étapes de serveur, de construction et de prérendu dans vos schémas avec une configuration de production.

Si vous souhaitez personnaliser 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 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égration avec le SDK Firebase JS

Lorsque vous incluez des méthodes Firebase JS SDK 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 .

Astuce : pensez à utiliser AngularFire, qui le fait automatiquement pour vous.

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

Les bundles d'administration échoueront s'ils sont inclus dans la version de votre navigateur, pensez donc à 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égrer à Firebase Authentication

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