@ngx-config/http-loader

Loader for ngx-config that provides application settings using http

Please support this project by simply putting a Github star. Share this library with friends on Twitter and everywhere else you can.

Table of contents:

• Getting started
  • Installation - Examples - Related packages - Adding @ngx-config/http-loader to your project (SystemJS)
• Settings - Setting up ConfigModule to use ConfigHttpLoader
• License

Getting started

Installation

You can install @ngx-config/http-loader using npm

npm install @ngx-config/http-loader --save

Note: You should have already installed @ngx-config/core.

Examples

• ng-seed/universal and fulls1z3/example-app are officially maintained projects, showcasing common patterns and best practices for @ngx-config/http-loader.

Related packages

The following packages may be used in conjunction with @ngx-config/http-loader:

• @ngx-config/core
• @ngx-config/merge-loader

Adding @ngx-config/http-loader to your project (SystemJS)

Add map for @ngx-config/http-loader in your systemjs.config

'@ngx-config/http-loader': 'node_modules/@ngx-config/http-loader/bundles/http-loader.umd.min.js'

Settings

Setting up ConfigModule to use ConfigHttpLoader

If you provide application settings using a JSON file or an API, you can call the forRoot static method using the ConfigHttpLoader. By default, it is configured to retrieve application settings from the endpoint /config.json (if not specified).

You can customize this behavior (and ofc other settings) by supplying a api endpoint to ConfigHttpLoader.

• Import ConfigModule using the mapping '@ngx-config/core' and append ConfigModule.forRoot({...}) within the imports property of app.module.
• Import ConfigHttpLoader using the mapping '@ngx-config/http-loader'.

Note: Considering the app.module is the core module in Angular application.

config.json

{
  "system": {
    "applicationName": "Mighty Mouse",
    "applicationUrl": "http://localhost:8000"
  },
  "seo": {
    "pageTitle": "Tweeting bird"
  },
  "i18n": {
    "locale": "en"
  }
}

app.module.ts

...
import { HttpClient } from '@angular/common/http';
import { ConfigModule, ConfigLoader,  } from '@ngx-config/core';
import { ConfigHttpLoader } from '@ngx-config/http-loader';
...

export function configFactory(http: HttpClient): ConfigLoader {
  return new ConfigHttpLoader(http, './config.json'); // API ENDPOINT
}

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  ...
  imports: [
    ConfigModule.forRoot({
      provide: ConfigLoader,
      useFactory: (configFactory),
      deps: [HttpClient]
    }),
    ...
  ],
  ...
  bootstrap: [AppComponent]
})

ConfigHttpLoader has two parameters:

• http: HttpClient : Http instance
• endpoint: string : the API endpoint, to retrieve application settings from (by default, config.json)

:+1: Well! @ngx-config/http-loader will now provide application settings to @ngx-config/core using http.

License

The MIT License (MIT)

Copyright (c) 2019 Burak Tasci