Environment Angular

An Asynchronous Environment Manager for Angular Applications.

About The Project

This library provides wrappers for managing environment properties in Angular applications using the @kuoki/environment library, as well as additional tools such as decorators, pipes and guards.

Getting Started

Installation

Using NPM

npm install --save @kuoki/environment-angular

Using Yarn

yarn add @kuoki/environment-angular

Dependencies

• Angular >= 13
• rxjs >= 7.0.0
• @kuoki/environment >= 1.5.0

Usage

import { HttpClientModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { Component, Injectable, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { EnvironmentQuery, EnvironmentSource, EnvironmentState, filterNil } from '@kuoki/environment';
import { EnvironmentModule } from '@kuoki/environment-angular';
import { Observable, switchMap, take } from 'rxjs';

import { environment } from './../environments/environment';

@Component({
  selector: 'app-root',
  template: `<h1>{{ pageTitle$ | async }}</h1>`
})
export class AppComponent {
  @EnvironmentValue$('pageTitle', { defaultValue: 'My App' })
  readonly pageTitle$!: Observable<string>;
}

@Injectable({ providedIn: 'root' })
class AngularEnvironmentSource implements EnvironmentSource {
  isRequired = true;

  load(): EnvironmentState {
    return environment;
  }
}

@Injectable({ providedIn: 'root' })
class LocalFileSource implements EnvironmentSource {
  constructor(protected readonly http: HttpClient) {}

  load(): Observable<EnvironmentState> {
    return this.http.get<EnvironmentState>(`assets/env.json`);
  }
}

@Injectable({ providedIn: 'root' })
class PropertiesServerSource implements EnvironmentSource {
  isRequired = true;

  constructor(protected readonly http: HttpClient, protected readonly query: EnvironmentQuery) {}

  load(): Observable<EnvironmentState> {
    return this.query.get$<string>('basePath').pipe(
      filterNil(),
      switchMap((basePath: string) => this.http.get<EnvironmentState>(`${basePath}/properties/myapp`)),
      take(1)
    );
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    EnvironmentModule.forRoot({
      sources: [AngularEnvironmentSource, LocalFileSource, PropertiesServerSource]
    })
  ],
  bootstrap: [AppComponent]
})
class AppModule {}

See the module in action in Stackblitz.