Environment Angular

An Asynchronous Environment Manager for Angular Applications.

Table of Contents

1. About The Project
2. Getting Started
3. Usage

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.