Angular in memory web api cyclic dependency with httpClient

Question

I try to use the angular-in-memory-web-api (version 0.5.1). This works fine if I set up the "database" with local objects, but it fails if I try to get my data from local JSON files over an http request with following error:

Uncaught Error: Provider parse errors: Cannot instantiate cyclic dependency! HttpClient ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

as soon as I import the httpClient package into my service.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
// Imports for loading & configuring the in-memory web api
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from 'app/shared/services/in-memory-data.service';

import { AppComponent } from './app.component';
// other imports of app components

@NgModule({
  imports:      [
    BrowserModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService),    // always import after the HttpClientModule
  ],
  declarations: [
    AppComponent,
    // ...
  ],
  providers: [ // app wide services not concerning the problem ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

in-memory-data.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { RequestInfo } from 'angular-in-memory-web-api';

@Injectable()
export class InMemoryDataService implements InMemoryDbService {       
  // constructor(http: HttpClient) { // this creates the cyclic dependency
  constructor() {

  }    
  createDb(reqInfo?: RequestInfo) {
    const db = {}   
    // fetch data from local JSON files and set up "database" object    
    return db;
  }

}

Is this problem related to the HttpClientModule or is it an angular-in-memory-web-api problem?

Well, don't use InMemoryWebApiModule if you are looking to make requests to json file. For that, just make http get requests with the httpclient. — AVJT82
– AVJT82, Commented Nov 6, 2017 at 19:15
Initializing the in-memory database service from a JSON files is what I want to do and therefore I have to request JSON files because it's quite some data... — jowey
– jowey, Commented Nov 6, 2017 at 19:37

Deepak Jha · Accepted Answer · 2017-12-12 11:24:46Z

1

I have faced same problem and that is how I was able to solve it, do not inject in the constructor but try to do that in the method.

From your createDB you will have httpclient injected correctly without the cyclic error.

import { Injectable, Injector } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { RequestInfo } from 'angular-in-memory-web-api';

@Injectable()
export class InMemoryDataService implements InMemoryDbService {  
  httpClient: HttpClient;
  constructor(private inject: Injector) {

  }    
  createDb(reqInfo?: RequestInfo) {
    const db = {}   
    this.httpClient = this.inject.get(HttpClient);
    // fetch data from local JSON files and set up "database" object    
    return db;
  }

}

answered Dec 12, 2017 at 11:24

Deepak Jha

1,61913 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular in memory web api cyclic dependency with httpClient

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related