1

I'm trying to implement feature flags in my angular2 application, so I can be able to release features, that are not quite ready for produktion. Right now I have two markets, English and German market. I want to control the features separately on these markets.

My idea of how these flags should be used:

  • To toggle on/off features based on a given market.
  • A-B testing features based on the markets.
  • Testing new styles on different components (like English market sees a certain list in one given approach where the German market sees it differently, also like A-B testing).
  • Enable specific users to test specific features (admin, normal consumers und so weiter).

To enable some of that, I have tried to create two Json files in my Angular2 application.

Example: 

{
  "PassengersFeature": {
    "displayed": true
  },
  "VehicleFeature": {
    "displayed": false
  },
  "DateFeature": {
    "displayed": false
  }
}

Right now, I have only added one value = "displayed" to test things.

Based on the given market "EN" or "DE", I'm loading the correct json file and puts it down in the features object I have created.

// When locale is set, load feature flags files.
this.features = this.appService.getFeaturesForLocale();

Now I want to share this object with all other components in the application. Is a service the best approach for this? or can you use something like $scope that you did in angularJS?

Mikkel
  • 1,771
  • 11
  • 35
  • 59
  • does your approach excludes features from the page source? e.g EN users can see DE features if they view your page sources? – shiva Jan 10 '17 at 10:16

1 Answers1

1

As of now sharedService seems best option for you scenario. Other approaches tell you about communication between Parent/Child, sibling/sibling components. So best way is to use sharedService and initialized it in bootstrap function.

micronyks
  • 54,797
  • 15
  • 112
  • 146
  • Okay.. will try that. Will wait to see if any other replies with another approach. – Mikkel Mar 10 '16 at 10:59
  • It actually works quite good.. I just don't know if its the right way to do it :) – Mikkel Mar 10 '16 at 12:41
  • it will. injecting sharedService in bootstrap implements singleton pattern in angular. So your single instance remains `shared` throughout application. – micronyks Mar 10 '16 at 13:22