Intégrer Angular

Diffuser du contenu statique

Vous pouvez diffuser du contenu statique avec 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 effectuez un déploiement 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 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 compatibles avec 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). Vous pouvez l'injecter dans votre module via le jeton REQUEST (exporté depuis @nguniversal/express-engine/tokens).