Intégrer Angular

Diffuser du contenu statique

Vous pouvez diffuser du contenu statique avec la commande de déploiement standard :

firebase deploy

Effectuer un prérendu du contenu dynamique

Pour effectuer un prérendu 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 : Ajouter un module serveur

Déployer

Lorsque vous effectuez un déploiement avec firebase deploy, Firebase crée votre bundle de navigateur et votre bundle de serveur, puis effectue un 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 angular.json avec une configuration de compilation de production.

Si vous devez adapter les hypothèses de la CLI, vous pouvez utiliser la FIREBASE_FRAMEWORKS_BUILD_TARGET variable d'environnement 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 Firebase JS

Lorsque vous incluez des méthodes du SDK Firebase JS dans les bundles de serveur et de 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 dans tous les environnements.

Facultatif : Intégrer le SDK Admin Firebase

Les bundles d'administration échoueront s'ils sont inclus dans votre compilation de 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 SSR

Facultatif : Intégrer Firebase Authentication

L'outil de déploiement Firebase compatible avec les frameworks Web maintient automatiquement l'état du client et du serveur synchronisé à l'aide de cookies. L'objet Express res.locals contient éventuellement une instance d'application Firebase authentifiée (firebaseApp) et l'utilisateur actuellement connecté (currentUser). Vous pouvez l'injecter dans votre module via le jeton REQUEST (exporté à partir de @nguniversal/express-engine/tokens).