Angular 6 in-memory-api returns undefined

Question

Problem: I am unable to get any data from my in-memory-api service. The http get function only return 'undefined'.

Summary of app: I have a function in data-store.service.ts, getAlert(id), that calls a backend-data.service function, backendDataService.getAlert(id), and returns this.http.get(url).

When backendDataService.getAlert(id) is called, it errors via the .pipe(catchError...) with an error of undefined (console reads: "getAlert backend failure: undefined").

Here is the backendDataService call that errors:

getAlert(alertId: number): Observable<any> {
const url = '/alert/' + alertId;
return this.http
  .get(url)
  .pipe(catchError(this.handleError('getAlert', [])));
}

When this is called, the catchError() is called and logs "undefined" as the error.

package.json

"@angular/core": "^6.1.7",
....
"angular-in-memory-web-api": "^0.6.1",
....

app.module.ts

@NgModule...

imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
RouterModule,
RouterModule.forRoot([]),

HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {
  dataEncapsulation: false
}),

...
providers: [
{
  provide: DateAdapter,
  useClass: MomentDateAdapter,
  deps: [MAT_DATE_LOCALE]
}
],
bootstrap: [AppComponent],
 entryComponents: [
 ConfirmationDialogComponent,
 DismissDialogComponent,
 DeviceNotesDialogComponent,
AccountNotesDialogComponent,
DatetimeRangePickerDialogComponent
]
...

data-store service.ts

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { BehaviorSubject } from 'rxjs';

import { BackendDataService } from './backend-data.service';

@Injectable({
providedIn: 'root'
})
export class DataStoreService {
private alertId: any;

public alert$: any = new BehaviorSubject([]);

constructor(
  private route: ActivatedRoute,
  public backendDataService: BackendDataService
) {
   this.getAlertId();
}

getAlertId() {
this.route.queryParams.subscribe(params => {
  this.alertId = params['aid'];
  if (this.alertId) {
    this.getAlert(this.alertId);
  }
  });
}

<<<<< THIS IS CALLS THE BACKEND FUNC THAT IS ERR >>>>>
getAlert(id: number) {  
 this.backendDataService.getAlert(id).subscribe(
   res => {
    const alertData: any = res;
    this.alert$.next(alertData);
  },
  err => console.log(`Error: ${err}`)
 );
}

backend-data-service.ts

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class BackendDataService {
  private base_url: string = '/api/v1/';
  private alert_endpoint: string = 'alert/';

  constructor(private http: HttpClient) {}

  getAlert(alertId: number): Observable<any> {
    const url = '/alert/' + alertId;
    return this.http
      .get(url)
      .pipe(catchError(this.handleError('getAlert', [])));
   }
}

in-memory-data.service.ts

import { InMemoryDbService } from 'angular-in-memory-web-api';

export class InMemoryDataService implements InMemoryDbService {
createDb() {
 const alert = [
   {
     id: 1492011
     ...more data...
   }
  ];
  return { alert };
 }
}

cbilliau cbilliau · Accepted Answer · 2018-09-20T20:33:42

the url has to be:

api/alert/(id#)

Example: api/alert/1492011

backend-data.service.ts

getAlert(alertId: number): Observable<any> {
const url = 'alert/api/' + alertId;
return this.http
  .get(url)
  .pipe(catchError(this.handleError('getAlert', [])));
}

Angular 6 in-memory-api returns undefined

1 Answers