If you are looking to add LaunchDarkly to a pre-existing Angular app, great! If that app was not created using the CLI, there may be a few bits you may not need.
To get up and running from scratch, open up a node command prompt and run the following commands…
Install the CLI from NPM
npm install -g @angular/cli
Create the new app
ng new featureflagging
This creates a new folder in your current working directory called featureflagging, and drops all the scaffolding in there. It does throw in a bunch of packages we don’t need for the purposes of this example, but we are just going to ignore them.
Run a bunch of commands
Now to fill up the app with the necessary packages
npm install --save ldclient-js
This gets us the libraries, but it’s no fun just using the libraries and not having any type-ahead; let’s sort that one out, the below gives you the LaunchDarkly TypeScript definition file.
npm install @types/ldclient-js --save
Create a LaunchDarkly Service
ng generate service LaunchDarkly --flat false
This will do everything it needs to throw down a new service called LaunchDarklyService in your app, the –flat false bit at the end there tells the CLI to put it in a folder. I like structure but you can have a big pool of files if that’s the way you like it.
You may have noticed the warning about the service being generated but not provided. What this is saying is a reference to your new service needs to be added to the module file for the app.
Now that the service is in place it needs a tweak or two.
Now if you were to view the app in a browser now, you would come across this nice little error, even though Webpack compiles successfully.
Do this by referencing the npm package in the .angular-cli.json file
Use the service through your App
By this point, you are all set! It’s pretty simple checking against your feature flags.
For me to test, I simply changed the app component to inject the LaunchDarkly Service (lines 2 and 12 below), then changed the title text in my app to indicate the status of my feature flag (lines 13 onward).