DEV Community

ILshat Khamitov
ILshat Khamitov

Posted on

4

Remote configurations for Angular8+

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

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!

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post