DEV Community

ILshat Khamitov
ILshat Khamitov

Posted on

Remote configurations for Angular8+

#angular #config #directives #remote

Remote configurations for Angular8+ applications, with built-in interceptor for mock REST data and non-permanent api

Installation 

npm i --save ngx-remote-config
Enter fullscreen mode Exit fullscreen mode

Usage

app.module.ts

import { HttpClientModule } from '@angular/common/http'; import { NgxRemoteConfigModule } from 'ngx-remote-config'; @NgModule({ imports: [ ... HttpClientModule, NgxRemoteConfigModule.forRoot({ url: 'https://testapi.io/api/EndyKaufman/ngx-remote-config.json' }), ... ], ... }) export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

app.component.html

... <p>Load with directive</p> <ng-container *remoteConfig="let config"> {{config|json}} </ng-container> <p>Load with service</p> <ng-container *ngIf="serviceConfig$ | async as serviceConfig"> {{serviceConfig|json}} </ng-container> ...
Enter fullscreen mode Exit fullscreen mode

app.component.ts

import { NgxRemoteConfigService } from 'ngx-remote-config'; import { Observable } from 'rxjs'; ... serviceConfig$: Observable<any>; constructor( private _ngxRemoteConfigService: NgxRemoteConfigService ) { this.serviceConfig$ = this._ngxRemoteConfigService.config$.asObservable(); } ...
Enter fullscreen mode Exit fullscreen mode

settings.json (https://testapi.io/api/EndyKaufman/ngx-remote-config.json)

{ "options":{ "name":"Remote name", "description":"Remote description" }, "/api/resource/2": { "get": { "status": 404, "body": { "message": "Fake not found message" } } }, "/api/resource": { "get": [ { "name": "get:item1" }, { "name": "get:item2" }, { "name": "get:item3" } ] }, "/api/(.*)": "https://todo-nestjs.rucken.io/api/" }
Enter fullscreen mode Exit fullscreen mode

Links

Demo - Demo application with ngx-remote-config.

Stackblitz - Simply sample of usage on https://stackblitz.com

Demo settings - Settings for demo application stored on https://testapi.io

Demo Ionic - Example usage in ionic application with native HTTP module

path-to-regexp - Library usage for match url on interceptor

Top comments (2)

Collapse
 
sebasjimenezvel profile image
Sebastian Jimenez V. • • Edited

Nice write up! I'm currently working on a simplified yet powerful version of remote config (tower.rocktlab.com) Would love to hear what you'd want offered that could make your life 10x easier!

Collapse
 
wynnwu profile image
Wynn • • Edited

Nice! You can also give hosting/managing your remote configs with Joystick Remote Configs getjoystick.com a try also!