Understanding Firebase Remote Config

Firebase Remote Config serves as a cloud-hosted parameter store that lets you alter your application's behavior without shipping a fresh build. The system maintains a complete revision history of every configuration change, which makes reverting to an earlier state a straightforward operation.

Consider it a remotely managed settings file that your app pulls and responds to dynamically.

This mechanism unlocks several practical use cases:

  • Feature Flags: Turn functionality on or off for specific audiences or during defined windows.
  • Content Management: Refresh banners, modify in-app copy, swap image locations, and update various content pieces without redeploying.
  • Tailored User Experiences: Serve customized content and capabilities based on user attributes such as demographics, behavior, device category, or stated preferences.
  • Rapid Mitigation: Deactivate faulty features or tweak settings immediately when problems surface.
  • A/B Testing: Run experiments across different app versions and observe user interactions to refine performance and engagement.

The underlying pattern is straightforward: you define fallback values inside your Angular code, then you override those defaults with values set in the Firebase Console.
At launch, or on a recurring schedule, your application retrieves the newest parameters from Remote Config, which lets you steer its behavior remotely.

Bringing Firebase Remote Config into Angular

Let's examine the steps needed to connect Firebase Remote Config to an Angular 19 project.

Preparing the Firebase Environment:

  • If it does not exist yet, establish a new project within the Firebase Console.
  • Register your Angular application with that Firebase project by following the console's prompts.
  • Activate the Remote Config service within the Firebase Console.
  • Set up parameters with initial values in the Remote Config area of the Firebase Console. Example: feature_new_checkout (Boolean, Default: false)

Adding AngularFire

Use npm to install the @angular/fire package within your Angular workspace:

npm install @angular/fire
Enter fullscreen mode Exit fullscreen mode

Within your app.config.ts, import the required Firebase modules and set up the application instance. The wiring included in the following snippet covers Firebase App, Remote Config, and the RemoteConfigService.

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import {
  getRemoteConfig,
  provideRemoteConfig,
} from '@angular/fire/remote-config';
import { routes } from './app.routes';
import { RemoteConfigService } from './config.service';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    RemoteConfigService,
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideRemoteConfig(() => getRemoteConfig()),
  ],
};
Enter fullscreen mode Exit fullscreen mode

Make sure environment.firebaseConfig exists in both environment.ts and environment.prod.ts with your Firebase configuration object:

export const environment = {
    production: false,
    firebaseConfig: {
        apiKey: "-----",
        authDomain: "-----",
        projectId: "-----",
        storageBucket: "-----",
        messagingSenderId: "-----",
        appId: "-----",
    }
};
Enter fullscreen mode Exit fullscreen mode

This setup leads to Firebase being initialized during the application's bootstrap process, and it also registers the RemoteConfigService for injection elsewhere.

Establishing Fallback Values in firebase.json

At your project's base directory, add a firebase.json file. This holds the built-in defaults for your Remote Config parameters, which serve as a safety net when connectivity to Firebase is unavailable.

{
  "feature_new_checkout": false
}
Enter fullscreen mode Exit fullscreen mode

The Remote Config Service

This service centralizes the logic for talking to Firebase Remote Config. The provided implementation is a workable baseline; let's examine its parts and consider improvements.

import { Injectable } from '@angular/core';
import {
  RemoteConfig,
  getRemoteConfig,
  fetchAndActivate,
  getValue,
} from 'firebase/remote-config';
import { inject } from '@angular/core';
import { FirebaseApp } from '@angular/fire/app';
import defaultConfig from '../../firebase.json';

@Injectable({
  providedIn: 'root',
})
export class RemoteConfigService {
  private remoteConfig: RemoteConfig;
  private app: FirebaseApp = inject(FirebaseApp);

  constructor() {
    this.remoteConfig = getRemoteConfig(this.app);
    this.remoteConfig.defaultConfig = { ...defaultConfig };
    this.remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
  }

  async initializeConfig(): Promise<void> {
    try {
      await fetchAndActivate(this.remoteConfig);
      console.log('Remote config fetched and activated');
    } catch (error) {
      console.error('Error fetching remote config:', error);
    }
  }

  getConfigValue(key: string) {
    return getValue(this.remoteConfig, key);
  }
}
Enter fullscreen mode Exit fullscreen mode

Interaction with the Firebase Remote Config SDK revolves around these functions: RemoteConfig, getRemoteConfig, fetchAndActivate, getValue.

  • inject(FirebaseApp): This makes the initialized Firebase App instance available within the service for further use.
  • getRemoteConfig(this.app): This call retrieves the Remote Config instance that is tied to the given Firebase App.
  • this.remoteConfig.defaultConfig = { ...defaultConfig }: This assigns the initial or fallback values to your Remote Config parameters. Here, the defaultConfig object is sourced from the import of firebase.json.

Embedding fallback values within the client is essential to keep the app functional during instances where the Remote Config service is unreachable.

  • minimumFetchIntervalMillis = 3600000: This defines the shortest time (in milliseconds) that must elapse between Remote Config retrieval attempts. Setting this to 3600000 (1 hour) is a reasonable initial choice for many apps.

Lowering this value too much can generate excessive network traffic and might trigger request limits.

  • initializeConfig: This asynchronous method acquires the most recent Remote Config parameters from the server and implements them.

  • fetchAndActivate: This is the key to fetching and then applying the fresh configuration data.

  • getConfigValue: This method retrieves a parameter by its key. It provides a RemoteConfigValue object, which you can then translate into the needed type such as a string, a number, or a boolean.

Applying Remote Config Parameters

import { Component, inject } from '@angular/core';
import { RemoteConfigService } from './config.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>Angular and Firebase Remote Config</h1>
    <span>Check the console to see the loaded config.</span>
  `,
})
export class AppComponent {
  private remoteConfig = inject(RemoteConfigService);

  async ngOnInit() {
    await this.remoteConfig.initializeConfig();
    const config = this.remoteConfig.getConfigValue('feature_new_checkout');
    console.log('Config: ' + config.asString());
  }
}
Enter fullscreen mode Exit fullscreen mode

Here, the RemoteConfigService is injected into the component. Inside the ngOnInit lifecycle hook, you can trigger initializeConfig() to fetch and activate the newest Remote Config data.

Launching the Application

Spin up your Angular development server:

ng serve
Enter fullscreen mode Exit fullscreen mode

Access http://localhost:4200/ from your browser. The application should log the fetched configuration details to the console.

Updating Values Elsewhere

  • Open the Firebase Console and go to the Remote Config page.
  • Switch the value for feature_new_checkout to true.
  • Select "Publish changes" to distribute the update.

Monitoring the Updates

Reload your Angular application in the browser. Following a brief wait period (bounded by the minimumFetchIntervalMillis), the holiday sale section should become visible, reflecting the new values set in the Firebase Console.

Should the changes not appear right away, it may take until the fetch interval has elapsed.

  • Type Awareness: Pay close attention to data types when fetching values from Remote Config. Select the proper as...() function to transform the RemoteConfigValue into the intended type.
  • Cache Strategy: To minimize network calls and boost performance, Remote Config automatically caches values locally. Tweak the minimumFetchIntervalMillis configuration to strike the right balance between up-to-date data and efficiency.
  • Naming Conventions: Adopt clear and consistent names for parameters to enhance code readability and simplify future maintenance.

Closing Thoughts

Firebase Remote Config offers a robust way to make your Angular applications more flexible and responsive to changing needs. With this service, you can modify features, content, and user interactions dynamically, eliminating the need for constant app re-releases. The result is stronger user engagement, better app performance, and shorter development iterations.

Applying the procedures described here allows you to incorporate Firebase Remote Config into your Angular projects with ease and take full advantage of its capabilities.

Enjoy building! 🎉
Have questions? Feel free to leave a comment!