# angular/angularfire architecture

> Architecture diagram of the GitHub repository angular/angularfire, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/angular/angularfire
- Repository: https://github.com/angular/angularfire

## Overview

AngularFire is an Angular integration layer for Firebase: application code configures an app through Angular dependency injection, consumes product-specific services and observable APIs, and sends operations to Firebase. The graph emphasizes that setup-to-service workflow while retaining the README’s distinct Firebase product integrations, compatibility API, and documented Router-aware analytics and authentication guards. Sampled source confirms app and selected service provider behavior; other product nodes and links reflect the repository tree and README, so uncertain internal wiring is omitted.

Main entry points: [`src/app/app.module.ts`](https://github.com/angular/angularfire/blob/main/src/app/app.module.ts) (Firebase app), [`src/auth/auth.module.ts`](https://github.com/angular/angularfire/blob/main/src/auth/auth.module.ts) (Authentication), [`src/analytics/analytics.module.ts`](https://github.com/angular/angularfire/blob/main/src/analytics/analytics.module.ts) (Google Analytics), [`src/compat/public_api.ts`](https://github.com/angular/angularfire/blob/main/src/compat/public_api.ts) (Compat services)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_setup["Angular setup"]
  node_app["Firebase app<br/>[app.module.ts]"]
  node_core["AngularFire core<br/>[core.ts]"]
end

subgraph group_firebase["Firebase products"]
  node_auth["Authentication<br/>[auth.module.ts]"]
  node_guard["Auth route guards<br/>[auth-guard.ts]"]
  node_firestore["Cloud Firestore"]
  node_database["Realtime Database<br/>[database.module.ts]"]
  node_functions["Cloud Functions"]
  node_storage["Cloud Storage<br/>[storage.module.ts]"]
  node_analytics["Google Analytics"]
  node_screen_tracking["Screen tracking"]
  node_messaging["Cloud Messaging"]
  node_remote_config["Remote Config"]
  node_performance["Performance monitoring"]
  node_app_check["App Check"]
  node_ai["AI Logic<br/>[ai.module.ts]"]
  node_data_connect["Data Connect"]
end

subgraph group_compat["Compatibility API"]
  node_compat_api["Compat services<br/>[public_api.ts]"]
  node_compat_storage["Compat Storage<br/>[storage.ts]"]
  node_compat_database["Compat Database<br/>[database.ts]"]
end

subgraph group_runtime["Angular runtime"]
end

node_developer(("Application developer"))
node_firebase_sdk["Firebase JS SDK"]
node_angular(("Angular app"))

node_developer -->|"configures providers"| node_app
node_app -->|"initializes app"| node_firebase_sdk
node_app -->|"provides DI context"| node_core
node_developer -->|"injects service"| node_auth
node_developer -->|"injects service"| node_firestore
node_developer -->|"injects service"| node_database
node_developer -->|"injects service"| node_functions
node_developer -->|"injects service"| node_storage
node_developer -->|"injects service"| node_analytics
node_developer -->|"injects service"| node_messaging
node_developer -->|"injects service"| node_remote_config
node_developer -->|"injects service"| node_performance
node_developer -->|"injects service"| node_app_check
node_developer -->|"injects service"| node_ai
node_developer -->|"injects service"| node_data_connect
node_auth -->|"wraps SDK"| node_firebase_sdk
node_firestore -->|"wraps SDK"| node_firebase_sdk
node_database -->|"wraps SDK"| node_firebase_sdk
node_functions -->|"wraps SDK"| node_firebase_sdk
node_storage -->|"wraps SDK"| node_firebase_sdk
node_analytics -->|"wraps SDK"| node_firebase_sdk
node_messaging -->|"wraps SDK"| node_firebase_sdk
node_remote_config -->|"wraps SDK"| node_firebase_sdk
node_performance -->|"wraps SDK"| node_firebase_sdk
node_app_check -->|"wraps SDK"| node_firebase_sdk
node_ai -->|"wraps SDK"| node_firebase_sdk
node_data_connect -->|"wraps SDK"| node_firebase_sdk
node_angular -->|"checks auth"| node_guard
node_guard -->|"uses auth state"| node_auth
node_angular -->|"routes activate"| node_screen_tracking
node_screen_tracking -->|"logs screen views"| node_analytics
node_compat_api -->|"exports service"| node_compat_storage
node_compat_api -->|"exports service"| node_compat_database
node_compat_storage -->|"wraps SDK"| node_firebase_sdk
node_compat_database -->|"wraps SDK"| node_firebase_sdk

click node_app "https://github.com/angular/angularfire/blob/main/src/app/app.module.ts"
click node_core "https://github.com/angular/angularfire/blob/main/src/core.ts"
click node_auth "https://github.com/angular/angularfire/blob/main/src/auth/auth.module.ts"
click node_guard "https://github.com/angular/angularfire/blob/main/src/auth-guard/auth-guard.ts"
click node_firestore "https://github.com/angular/angularfire/blob/main/src/firestore/firestore.module.ts"
click node_database "https://github.com/angular/angularfire/blob/main/src/database/database.module.ts"
click node_functions "https://github.com/angular/angularfire/blob/main/src/functions/functions.module.ts"
click node_storage "https://github.com/angular/angularfire/blob/main/src/storage/storage.module.ts"
click node_analytics "https://github.com/angular/angularfire/blob/main/src/analytics/analytics.module.ts"
click node_screen_tracking "https://github.com/angular/angularfire/blob/main/src/analytics/screen-tracking.service.ts"
click node_messaging "https://github.com/angular/angularfire/blob/main/src/messaging/messaging.module.ts"
click node_remote_config "https://github.com/angular/angularfire/blob/main/src/remote-config/remote-config.module.ts"
click node_performance "https://github.com/angular/angularfire/blob/main/src/performance/performance.module.ts"
click node_app_check "https://github.com/angular/angularfire/blob/main/src/app-check/app-check.module.ts"
click node_ai "https://github.com/angular/angularfire/blob/main/src/ai/ai.module.ts"
click node_data_connect "https://github.com/angular/angularfire/blob/main/src/data-connect/data-connect.module.ts"
click node_compat_api "https://github.com/angular/angularfire/blob/main/src/compat/public_api.ts"
click node_compat_storage "https://github.com/angular/angularfire/blob/main/src/compat/storage/storage.ts"
click node_compat_database "https://github.com/angular/angularfire/blob/main/src/compat/database/database.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_core toneBlue
class node_auth,node_guard,node_firestore,node_database,node_functions,node_storage,node_analytics,node_screen_tracking,node_messaging,node_remote_config,node_performance,node_app_check,node_ai,node_data_connect toneAmber
class node_compat_api,node_compat_storage,node_compat_database toneMint
class node_developer,node_firebase_sdk,node_angular toneIndigo
```

## Components

### Angular setup

- [Firebase app](https://github.com/angular/angularfire/blob/main/src/app/app.module.ts): `src/app/app.module.ts`
- [AngularFire core](https://github.com/angular/angularfire/blob/main/src/core.ts): `src/core.ts`

### Firebase products

- [Authentication](https://github.com/angular/angularfire/blob/main/src/auth/auth.module.ts): `src/auth/auth.module.ts`
- [Auth route guards](https://github.com/angular/angularfire/blob/main/src/auth-guard/auth-guard.ts): `src/auth-guard/auth-guard.ts`
- [Cloud Firestore](https://github.com/angular/angularfire/blob/main/src/firestore/firestore.module.ts): `src/firestore/firestore.module.ts`
- [Realtime Database](https://github.com/angular/angularfire/blob/main/src/database/database.module.ts): `src/database/database.module.ts`
- [Cloud Functions](https://github.com/angular/angularfire/blob/main/src/functions/functions.module.ts): `src/functions/functions.module.ts`
- [Cloud Storage](https://github.com/angular/angularfire/blob/main/src/storage/storage.module.ts): `src/storage/storage.module.ts`
- [Google Analytics](https://github.com/angular/angularfire/blob/main/src/analytics/analytics.module.ts): `src/analytics/analytics.module.ts`
- [Screen tracking](https://github.com/angular/angularfire/blob/main/src/analytics/screen-tracking.service.ts): `src/analytics/screen-tracking.service.ts`
- [Cloud Messaging](https://github.com/angular/angularfire/blob/main/src/messaging/messaging.module.ts): `src/messaging/messaging.module.ts`
- [Remote Config](https://github.com/angular/angularfire/blob/main/src/remote-config/remote-config.module.ts): `src/remote-config/remote-config.module.ts`
- [Performance monitoring](https://github.com/angular/angularfire/blob/main/src/performance/performance.module.ts): `src/performance/performance.module.ts`
- [App Check](https://github.com/angular/angularfire/blob/main/src/app-check/app-check.module.ts): `src/app-check/app-check.module.ts`
- [AI Logic](https://github.com/angular/angularfire/blob/main/src/ai/ai.module.ts): `src/ai/ai.module.ts`
- [Data Connect](https://github.com/angular/angularfire/blob/main/src/data-connect/data-connect.module.ts): `src/data-connect/data-connect.module.ts`

### Compatibility API

- [Compat services](https://github.com/angular/angularfire/blob/main/src/compat/public_api.ts): `src/compat/public_api.ts`
- [Compat Storage](https://github.com/angular/angularfire/blob/main/src/compat/storage/storage.ts): `src/compat/storage/storage.ts`
- [Compat Database](https://github.com/angular/angularfire/blob/main/src/compat/database/database.ts): `src/compat/database/database.ts`

### Other components

- **Application developer**
- **Firebase JS SDK**
- **Angular app**

## Connections

- Application developer → Firebase app: configures providers
- Firebase app → Firebase JS SDK: initializes app
- Firebase app → AngularFire core: provides DI context
- Application developer → Authentication: injects service
- Application developer → Cloud Firestore: injects service
- Application developer → Realtime Database: injects service
- Application developer → Cloud Functions: injects service
- Application developer → Cloud Storage: injects service
- Application developer → Google Analytics: injects service
- Application developer → Cloud Messaging: injects service
- Application developer → Remote Config: injects service
- Application developer → Performance monitoring: injects service
- Application developer → App Check: injects service
- Application developer → AI Logic: injects service
- Application developer → Data Connect: injects service
- Authentication → Firebase JS SDK: wraps SDK
- Cloud Firestore → Firebase JS SDK: wraps SDK
- Realtime Database → Firebase JS SDK: wraps SDK
- Cloud Functions → Firebase JS SDK: wraps SDK
- Cloud Storage → Firebase JS SDK: wraps SDK
- Google Analytics → Firebase JS SDK: wraps SDK
- Cloud Messaging → Firebase JS SDK: wraps SDK
- Remote Config → Firebase JS SDK: wraps SDK
- Performance monitoring → Firebase JS SDK: wraps SDK
- App Check → Firebase JS SDK: wraps SDK
- AI Logic → Firebase JS SDK: wraps SDK
- Data Connect → Firebase JS SDK: wraps SDK
- Angular app → Auth route guards: checks auth
- Auth route guards → Authentication: uses auth state
- Angular app → Screen tracking: routes activate
- Screen tracking → Google Analytics: logs screen views
- Compat services → Compat Storage: exports service
- Compat services → Compat Database: exports service
- Compat Storage → Firebase JS SDK: wraps SDK
- Compat Database → Firebase JS SDK: wraps SDK