OpenFeature Provider for Angular

Integrate your Angular applications with Harness FME using the Angular OpenFeature ProviderAn OpenFeature Provider wraps the Harness FME SDK, acting as a bridge between the OpenFeature SDK and the FME SDK. It translates OpenFeature function calls into operations handled by the FME SDK, which communicates with Harness services to evaluate flags and retrieve configuration updates., a standardized, vendor-agnostic feature flagging API. This provider implements the OpenFeature specification and bridges the OpenFeature SDK with the Harness FME Browser SDK.

This page walks you through installing, configuring, and using the Angular OpenFeature provider to evaluate feature flagsA feature flag is a conditional toggle in Harness FME that enables or disables specific functionality without deploying new code. It allows for controlled feature rollouts, A/B testing, and quick rollbacks if issues arise. in your Angular applications.

Prerequisites

Before you begin, ensure you have the following:

• A valid Harness FME SDK key for your project
• An Angular 14+ project
• Access to your project's package.json file to add the provider dependency

Version compatibility

Component	Minimum Version
Angular	≥ 14
@splitsoftware/openfeature-web-split-provider	≥ 1.0.0
Harness FME Browser SDK	≥ 10.x
OpenFeature Angular SDK	≥ 0.1.0

Install the provider and dependencies

Add the Harness FME OpenFeature provider dependency to your project's package.json file.

npm i @openfeature/angular-sdk @splitsoftware/splitio-browserjs @splitsoftware/openfeature-web-split-provider

Initialize the provider

The Harness FME OpenFeature provider requires your Harness FME Browser SDK key and a targeting keyA unique identifier used to target specific users or entities when evaluating feature flags. It helps determine which variation of a flag should be served based on predefined rules and conditions..

If you are using a traditional NgModule setup:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OpenFeatureModule } from '@openfeature/angular-sdk';
import { SplitFactory } from '@splitsoftware/splitio-browserjs';
import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider';

const splitFactory = SplitFactory({
  core: {
    authorizationKey: '<YOUR_CLIENT_SIDE_SDK_KEY>',
    key: 'TARGETING_KEY'
  }
});
const openFeatureProvider = new OpenFeatureSplitProvider(splitFactory);

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    OpenFeatureModule.forRoot({
      provider: openFeatureProvider
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

If you are using a standalone bootstrap (Angular 16 or later):

import { ApplicationConfig, provideBrowserGlobalErrorListeners, importProvidersFrom } from '@angular/core';
import { OpenFeatureModule } from '@openfeature/angular-sdk';
import { SplitFactory } from '@splitsoftware/splitio-browserjs';
import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider';

const splitFactory = SplitFactory({
  core: {
    authorizationKey: 'CLIENT_SIDE_SDK_KEY',
    key: 'TARGETING_KEY'
  }
});
const openFeatureProvider = new OpenFeatureSplitProvider(splitFactory);

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    importProvidersFrom(
      OpenFeatureModule.forRoot({
        provider: openFeatureProvider
      })
    )
  ]
};

Evaluate feature flags

Use the FeatureFlagService (which is shown as splitService in this example) to evaluate flags through the OpenFeature provider. Specify the feature flag key and a default value in the evaluation method to ensure predictable behavior while the flag resolves.

import { FeatureFlagService, EvaluationDetails } from '@openfeature/angular-sdk';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  constructor(private splitService: FeatureFlagService) {}
  
  ngOnInit() {
    this.splitService.getStringDetails('featureFlagName', 'default').subscribe((result: EvaluationDetails<string>) => {
      console.log('Feature flag result:', result.value);
    });
  }
}

For more information, go to the Harness FME Web OpenFeature Provider GitHub repository.