Intégrer Angular

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

Avant de commencer

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

  • Firebase CLI version 12.1.0 ou ultérieure. Veillez à installer la CLI en utilisant la méthode de votre choix.

  • (Facultatif) La facturation est activée dans votre projet Firebase (obligatoire si vous prévoyez d'utiliser le rendu côté serveur).

  • 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 l'interface de ligne de commande Firebase, activez l'aperçu des frameworks Web : 
    firebase experiments:enable webframeworks

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

    firebase init hosting

  3. Répondez "Oui" à la question "Do you want to use a web framework?" (Voulez-vous utiliser un framework Web ?). (version expérimentale)"

  4. Choisissez le répertoire source de l'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 votre configuration d'hébergement dans firebase.json pour avoir 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 SSR.

ng add @angular/ssr

Pour en savoir plus, consultez le guide sur le prérendu Angular (SSG).

Facultatif : ajoutez un module de serveur

Déployer

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

Déploiement personnalisé

La CLI Firebase suppose que vous avez défini une seule application dans votre fichier angular.json avec une configuration de compilation de production.

Si vous devez adapter les hypothèses de la CLI, vous pouvez utiliser la variable d'environnement FIREBASE_FRAMEWORKS_BUILD_TARGET ou ajouter AngularFire et modifier votre angular.json :

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

(Facultatif) Intégrer le SDK JS Firebase

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 pris en charge dans tous les environnements.

Facultatif : intégrer le SDK Admin Firebase

Les bundles d'administration échoueront s'ils sont inclus dans la compilation de votre navigateur. Pensez donc à les fournir dans votre module de 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');

Diffuser du contenu entièrement dynamique avec SSR

Facultatif : intégrer à Firebase Authentication

Les outils de déploiement Firebase compatibles avec les frameworks Web maintiennent 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). Cela peut être injecté dans votre module via le jeton REQUEST (exporté depuis @nguniversal/express-engine/tokens).