{"id":15024619,"url":"https://github.com/jontze/ng-remote-config","last_synced_at":"2026-02-15T18:31:07.537Z","repository":{"id":243490550,"uuid":"812450327","full_name":"jontze/ng-remote-config","owner":"jontze","description":"Helps to fetch Configs from Remote Sources to Configure Angular","archived":false,"fork":false,"pushed_at":"2025-02-12T05:14:22.000Z","size":1278,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-21T08:58:17.815Z","etag":null,"topics":["angular","angular-lib","angular-library","angular2","config","configuration","library","remote","typescript"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/@jontze/ng-remote-config","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jontze.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-06-08T23:37:20.000Z","updated_at":"2025-01-17T19:18:27.000Z","dependencies_parsed_at":"2024-06-09T10:57:18.199Z","dependency_job_id":"1c8abd65-7b3e-4a2f-9cc6-6223057cf1de","html_url":"https://github.com/jontze/ng-remote-config","commit_stats":null,"previous_names":["jontze/ng-remote-config"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/jontze/ng-remote-config","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jontze%2Fng-remote-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jontze%2Fng-remote-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jontze%2Fng-remote-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jontze%2Fng-remote-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jontze","download_url":"https://codeload.github.com/jontze/ng-remote-config/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jontze%2Fng-remote-config/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29486507,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T15:33:17.885Z","status":"ssl_error","status_checked_at":"2026-02-15T15:32:53.698Z","response_time":118,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-lib","angular-library","angular2","config","configuration","library","remote","typescript"],"created_at":"2024-09-24T20:00:39.373Z","updated_at":"2026-02-15T18:31:07.519Z","avatar_url":"https://github.com/jontze.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Remote Configuration Library\n\n![NPM License](https://img.shields.io/npm/l/%40jontze%2Fng-remote-config) ![NPM Version](https://img.shields.io/npm/v/%40jontze%2Fng-remote-config)\n\n## ToC\n\n- [Angular Remote Configuration Library](#angular-remote-configuration-library)\n  - [ToC](#toc)\n  - [Overview](#overview)\n  - [Features](#features)\n  - [Installation](#installation)\n  - [Angular Version Matrix](#angular-version-matrix)\n  - [Usage](#usage)\n    - [Example](#example)\n  - [Why?](#why)\n    - [Addressing Angular’s Limitation with Async Providers](#addressing-angulars-limitation-with-async-providers)\n    - [Drawbacks to Consider](#drawbacks-to-consider)\n  - [Alternatives](#alternatives)\n  - [Contribution](#contribution)\n  - [License](#license)\n\n## Overview\n\nThis Angular library provides a simple way to manage remote configuration\nsettings in an Angular application. The library allows you to store a fetched\nconfig **before bootstrapping** your Angular application and then provides it\ninto the DI context in a structured and type-safe manner.\n\n## Features\n\n- Easy to set and retrieve configurations.\n- Injectable service for accessing configurations via Angular's dependency\n  injection system.\n- Support to access configurations outside of the DI context (e.g before bootstrap, ...).\n\n## Installation\n\nInstall it via npm\n\n```bash\nnpm install @jontze/ng-remote-config\n```\n\nor yarn\n\n```bash\nyarn add @jontze/ng-remote-config\n```\n\nor any other Node.JS package manager.\n\n## Angular Version Matrix\n\n| Angular Version | ng-remote-config Version |\n| --------------- | ------------------------ |\n| ^19.0.0         | ^2.0.0                   |\n| ^18.0.0         | ^1.0.0                   |\n\n## Usage\n\n1. Fetch your Config and Set in the Store\n\nMove your angular app bootstrap code to a separate file. Here it's called\n`bootstrap.ts`.\n\n```typescript\n// bootstrap.ts\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { appConfig } from './app/app.config';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, appConfig);\n```\n\nIn your application entrypoint (usually `main.ts`), fetch the configuration\nfiles and then set them in the store. After that, import your application\nbootstrap.\n\n```typescript\n// main.ts\nimport { setRemoteConfig } from '@jontze/ng-remote-config';\n\nPromise.all([\n  fetch('/assets/config.json')\n    .then((res) =\u003e res.json())\n    .then((config) =\u003e setRemoteConfig(config)),\n  fetch('/assets/features.json')\n    .then((res) =\u003e res.json())\n    .then((features) =\u003e setRemoteConfig(features, 'features')),\n])\n  .then(() =\u003e import('./bootstrap'))\n  .catch((err) =\u003e console.error(err));\n```\n\n2. Provide the Configuration in DI\n\n```typescript\nimport { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { provideConfig } from '@jontze/ng-remote-config';\n\nimport { appRoutes } from './app.routes';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideRouter(appRoutes), provideConfig()],\n};\n```\n\n3. Access the Configuration via the ConfigService\n\n```typescript\ninterface YourConfigType {\n  apiUrl: string;\n}\n\ninterface FeatureFlags {\n  featureA: boolean;\n  featureB: boolean;\n}\n\n@Component({\n  standalone: true,\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.css',\n})\nexport class AppComponent implements OnInit {\n  private readonly configService = inject(ConfigService);\n\n  ngOnInit(): void {\n    console.debug('ConfigService:', this.configService.getConfig\u003cYourConfigType\u003e());\n    console.debug('ConfigService:', this.configService.getConfig\u003cFeatureFlags\u003e('features'));\n  }\n}\n```\n\n4. Outside of the DI Context: Access the Configuration via the Store\n\n```typescript\nimport { ApplicationConfig } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { getRemoteConfig } from '@jontze/ng-remote-config';\n\nimport { appRoutes } from './app.routes';\n\ninterface ApiConfig {\n  apiUrl: string;\n}\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideRouter(appRoutes), provideSomeAPI({ url: getRemoteConfig\u003cApiConfig\u003e().apiUrl })],\n};\n```\n\n### Example\n\nYou can take a look at the\n[ng-remote-config-example](./apps/ng-remote-config-example/) application for a\nbetter understanding.\n\n## Why?\n\nIn traditional Angular applications, configurations are often hardcoded or\nenvironment-specific. This approach requires a separate build for each\nenvironment (e.g., development, staging, production). Managing multiple builds\ncan be cumbersome and error-prone, especially in continuous integration and\ndelivery pipelines.\n\nTo prevent this you can dynamically load configurations at runtime, eliminating\nthe need for multiple builds. This allows you to have a single build that can be\ndeployed across different environments. Furthermore, you can even change\nconfiguration without the need to redeploy your app! **Built once, deploy\neverywhere!**\n\n### Addressing Angular’s Limitation with Async Providers\n\nAngular lacks built-in support for asynchronous providers, making it difficult\nto fetch and inject loaded configurations or settings dynamically during\napplication bootstrap.\n\nIssue: [angular/angular#23279](https://github.com/angular/angular/issues/23279)\n\nA common and reliable solution to this problem is to fetch the configurations\nbefore application bootstrap. However, this has several drawbacks.\n\n### Drawbacks to Consider\n\n1. **Increased Initial Loading Time**: Fetching configurations dynamically at\n   runtime add to the initial loading time of your application. The\n   configurations need to be retrieved and processed before the application can\n   fully initialize, which might slightly delay the startup time.\n\n2. **Potential for Run-time Errors**: Since configurations are fetched\n   dynamically, any issues with the configuration service or the configuration\n   data itself can lead to run-time errors.\n\n3. **Dependency on External Configuration Services**: Relying on remote\n   configurations means your application depends on the availability and\n   reliability of the configuration service. Network issues or service outages\n   can impact your application's ability to retrieve configurations, so you\n   should consider fallback mechanisms or local caching.\n\n## Alternatives\n\nIf you only need the Configuration in the DI context you can also use the\n[app initializer provider](https://angular.dev/api/core/provideAppInitializer?tab=usage-notes)\nto fetch the configuration during angular is bootstrapped.\n\nThe provider accepts a promise or an observable as return type that blocks startup\nuntil the promise is resolved or the observable completes.\n\nHowever, this might not be the best solution if you need to access the config\nearlier in the application lifecycle.\n\n## Contribution\n\nContributions are welcome! Please open issues or pull requests for bug reports\nor feature requests.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjontze%2Fng-remote-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjontze%2Fng-remote-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjontze%2Fng-remote-config/lists"}