Angular2 / Error: Collection not found

I am very new to Angular2 and trying to build up a Todo app.

Here's my file structure:

My todo.service.ts code (inside shared folder)

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { ITodo } from './todo.model';

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

 getTodos(): Promise<ITodo[]> {
    return this.http.get('api/todos')
            .toPromise()
            .then(res => res.json().data)
            .catch(this.handleError); 
}

addTodo(todo: ITodo): Promise<ITodo> {
    return this.post(todo);
}

deleteTodo(todo: ITodo): Promise<ITodo> {
    return this.delete(todo);
}

private post(todo: ITodo): Promise<ITodo> {
    let headers = new Headers({
        'Content-Type': 'application/json'
    });

    return this.http.post('api/todos', JSON.stringify(todo), { headers })
    .toPromise()
    .then(res => res.json().data)
    .catch(this.handleError)
}

private delete(todo: ITodo): Promise<ITodo> {
    let headers = new Headers({
        'Content-Type': 'application/json'
    });

    let url = `api/todos/${todo.id}`;

    return this.http.delete(url, { headers })
    .toPromise()
    .then(res => todo)
    .catch(this.handleError)
}

private handleError(error: any): Promise<any> {
    console.log('The error occured >>>', error);
    return Promise.reject(error.message || error);
  }
}

My main.ts code

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS, XHRBackend } from '@angular/http';
import { InMemoryBackendService, SEED_DATA } from 'angular2-in-memory- web-api'; 
import { TodoSeedData } from './shared/todo.data';

import {AppComponent} from './app.component';

bootstrap(AppComponent,[
  HTTP_PROVIDERS,
  { provide: XHRBackend, useClass: InMemoryBackendService },
  { provide: SEED_DATA, useClass: TodoSeedData },
 ]);

Everything had been working without errors till I needed http.

Found sort of similar problem here

but it is not working to me.

Console.log shows error: Collection 'todos' not found.

I guess it's an issue with http. Please, help.

Solution 1:

I had a similar issue calling my WebAPI. In the end I had to comment out the InMemoryDataService - as soon as I did this then the error went away and I was able to hit my WebAPI: AngularJS 2 : Getting data from json file not working

Solution 2:

This appears to be an issue when using the InMemoryDataService for the InMemoryWebApi (to mock your actual back end api) and not with the Angular2 Http. You can confirm this by turning off the in memory web api in your app.module.ts and see if the http calls then successfully hit your API.

The createDb() method in your InMemoryBackendService should look something like this for it to work.

export class InMemoryBackendService implements InMemoryDbService {
createDb() {
   let todos = <object>,
   todos2 = <object>;        <==== collection todos is defined here...
   return {todos,todos2};    
 }
}

Replace with your mock data objects.
See the documentation for in memory web api here

Solution 3:

I had also the same propblem I had commented out the InMemoryWebApiModule.forRoot(InMemoryDataService) in my Module and its working fine for me