https://github.com/leolanese/angular-feature-flag
Implementing feature toggles in an Angular (17+) application using APP_INITIALIZER is a powerful technique. Feature toggles enable you to conditionally activate or deactivate specific features in your application based on configuration settings. This approach can be particularly useful for deploying features incrementally
https://github.com/leolanese/angular-feature-flag
angular initializer standalone typescript
Last synced: about 1 year ago
JSON representation
Implementing feature toggles in an Angular (17+) application using APP_INITIALIZER is a powerful technique. Feature toggles enable you to conditionally activate or deactivate specific features in your application based on configuration settings. This approach can be particularly useful for deploying features incrementally
- Host: GitHub
- URL: https://github.com/leolanese/angular-feature-flag
- Owner: leolanese
- Created: 2024-06-03T17:07:06.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-11T10:25:00.000Z (over 1 year ago)
- Last Synced: 2025-02-24T12:11:33.805Z (about 1 year ago)
- Topics: angular, initializer, standalone, typescript
- Language: TypeScript
- Homepage:
- Size: 208 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular (17+) Feature Flags 🚩
> Implementing feature toggles in an Angular (17+) application using APP_INITIALIZER is a powerful technique. Feature toggles enable you to conditionally activate or deactivate specific features in your application based on configuration settings. This approach can be particularly useful for deploying features incrementally
## Demo App
## Unit-test CLI
## Unit-test browser
## APP_INITIALIZER Token
The `APP_INITIALIZER` token in Angular is a `dependency injection token` that allows you to load and initialize configuration information before the application starts. This ensures that necessary configuration data is available throughout the application as soon as it begins execution.
## Using APP_INITIALIZER for Feature Toggles
Implementing feature toggles in an Angular application using APP_INITIALIZER is a powerful technique. Feature toggles enable you to conditionally activate or deactivate specific features in your application based on configuration settings. This approach can be particularly useful for deploying features incrementally, performing A/B testing, or managing experimental features without the need to redeploy the entire application.
## APP_INITIALIZER implementation ste--by-step in Angular application
```js
Steps to Implement Feature Toggles with APP_INITIALIZER
Create a Configuration Service:
This service will be responsible for fetching and storing the configuration data, including feature toggles.
Configure APP_INITIALIZER:
Use APP_INITIALIZER to ensure that the configuration service loads the feature toggles before the application starts.
Use Feature Toggles in Components:
Inject the configuration service into your components and use the feature toggles to conditionally display or hide features.
Now, we can efficiently manage feature toggles in your Angular application, ensuring that features are enabled or disabled based on configuration settings loaded during the app initialization phase.
```
---
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Running unit tests
Unit tests are written using Jasmine and executed with Karma.
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
## Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
## Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
---
### :100: Thanks!
#### Now, don't be an stranger. Let's stay in touch!
##### :radio_button: Linkedin: LeoLanese
##### :radio_button: Twitter: @LeoLanese
##### :radio_button: Portfolio: www.leolanese.com
##### :radio_button: DEV.to: dev.to/leolanese
##### :radio_button: Blog: leolanese.com/blog
##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com