Angular CLI - How to cache Http Service calls simply using rxjs

To cache simply in Angular 7 CLI, here used rxjs on HttpClient.

To cache entire country list, we can use as follows,

import { map, catchError, shareReplay } from 'rxjs/operators';

import { throwError, Observable } from 'rxjs';

…

private countryCache$ = Observable<any>;

  getCountryList() {

    if (!this.countryCache$) {

      this.countryCache$ =

        this.http.get('/api/country/getCountryList')

          .pipe(

            map(response => {

              return response;

            }),

            catchError((error, caught) => {

              return throwError(error);

            }),

            shareReplay(1)

          );

    }

    return this.countryCache$;

  }

To cache object by it's parameter we can use as follows,in this example cached country information by it's name.

private countryInfoCache$ = new Map<string, Observable<any>>();

getCountryInfo(countryName: string) {

    if (!this.countryInfoCache$.get(countryName)) {

      let countryInfoCacheResult =

        this.http.get('/api/country/getCountryInfoByName',

          { 'countryName': countryName })

          .pipe(

            map(response => {

              return response;

            }),

            catchError((error, caught) => {

              return throwError(error);

            }),

            shareReplay(1)

          );

      this.countryInfoCache$.set(countryName, countryInfoCacheResult);

    }

    return this.countryInfoCache$.get(countryName);

  }

Angular CLI - Handle Error Globally

To handle error globally in Angular 7 Cli, follow below steps

Ref: https://angular.io/api/core/ErrorHandler

Steps:

- Create ErrorHanlder file as below

import { Injectable, ErrorHandler } from '@angular/core';

@Injectable()

export class GlobalErrorHandler implements ErrorHandler {

  constructor(private ngZone: NgZone) {

  }

  handleError(error) {

    this.ngZone.run(() => {

//use ngZone to attach context to Angular's zone

//custom logic to do anything, for ex: toastService can be injected and shown here

    });

    //log as error to console

    console.error(error);

  }

}

-  Inject GlobalErrorHandler into app.module.ts providers as below

import { NgModule, ErrorHandler } from '@angular/core';

import { GlobalErrorHandler } from './core/config/error.handler';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

  ],

  providers: [

    …,

    { provide: ErrorHandler, useClass: GlobalErrorHandler },

  ],

  bootstrap: [AppComponent]

})

export class AppModule { }

-  Now throw error from anywhere, it will be catched in GlobalErrorHanlder

import { catchError, map } from 'rxjs/operators';

import { Observable, of, throwError } from 'rxjs';

….

getUser(): Observable<User> {

      return this.http.get(this.getUserUrl      )

        .pipe(

        map(response => { return <User>response; }),

        catchError((error, caught) => {

          //handled error globally

          return throwError(error);

        }));

    }