angular-in-memory-web-api not finding created database

Question

I am building an Angular 2 application with a Node.js back-end. I am trying to use angular-in-memory-web-api to find a created database within a custom file "./in-memory-data-service," pretty much following the Tour of Heroes demo on Angular 2 except using Observables instead of Promises. However, I keep getting undefined returned in my console.

Here is my super-basic database:

in-memory-data.service.ts

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

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
      let comments = [
          {id: 1, author: "Katie", text: "Hows it going?"}
      ];
      return {comments};
  }
}

Here is my app.module.ts file. All my custom components and providers are declared.

/// <reference path="../node_modules/immutable/dist/immutable.d.ts" />
import { NgModule }               from "@angular/core";
import { BrowserModule }          from "@angular/platform-browser";
import { HttpModule, JsonpModule, XHRBackend } from "@angular/http";
import { FormsModule, ReactiveFormsModule }            from "@angular/forms";
import { ChartsModule }           from "ng2-charts/ng2-charts";
import { InMemoryWebApiModule, InMemoryBackendService }   from "angular-in-memory-web-api";
import { InMemoryDataService }    from "./in-memory-data.service";
// extra dependencies omitted

@NgModule({
  imports: [ 
    ...
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    ...
  ],
  declarations: [ 
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

This is the relevant part of my comment.service.ts file which retrieves the created database. I suspect the private commentsUrl = "app/comments" could be the culprit, but I've changed it to many other addresses with a similar result.

import {Injectable} from "@angular/core";
import {Http, Response, Headers, RequestOptions, XHRBackend} from "@angular/http";
import {Observable} from "rxjs/Rx";

export class Comment {
    constructor(
        public id: number,
        public author: string,
        public text: string
    ){}
}

@Injectable()
export class CommentService {
    constructor (private http: Http) {}

    private commentsUrl = "app/comments";

    getComments(): Observable<Comment[]> {
        return this.http.get(this.commentsUrl)
            .map((res: Response) => res.json())
            .catch((error:any) => Observable.throw(error.json().error || "Server error"));
    }

}

And this is the comment-list.component.ts file which collects the data from the service. The console.log(this.comments) in the loadComments() method is where one can see the undefined:

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import {Comment, CommentService} from './comment.service';
import { EmitterService } from './emitter.service';

@Component({
    selector: 'comment-list',
    templateUrl: "./app/comment-list.component.html"
})

export class CommentListComponent implements OnInit, OnChanges {
    constructor(private commentService: CommentService) {}

    comments: Comment[];

    @Input() listId: string;
    @Input() editId: string;

    loadComments(){
        this.commentService.getComments()
            .subscribe(
                comments => this.comments = comments,
                err => {
                    console.log(err);
                }
            );
            console.log(this.comments);
    }
    ngOnInit(){
        this.loadComments();
    }

    ngOnChanges(changes:any){
        EmitterService.get(this.listId).subscribe((comments:Comment[]) => 
            {this.comments = comments});
    }
}

Any help on this issue would be appreciated. I can supply extra code if needed.

Answer 1

Try changing res.json() for res.json().data in your service