Angular 2 Http Error

Question

I'm new in Angular 2 and I am very stuck on HTTP.

The application runs but when I try get my InMemoryDbService it fails.

The error is:

EXCEPTION: Uncaught (in promise): TypeError: Cannot read property '0' of undefined

but I'm not trying access to '0' property. The error disappear when I delete function get(this.url) in clientes.service.ts

My Code:

clientes.service.ts

import { Injectable } from '@angular/core';
import { Cliente } from './../models/clientes';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class ClientesService{

    private headers = new Headers({'Content-Type': 'application/json'});
    private url = '/app/components/apis/clientes-data';// URL a la web api.

    constructor(private http: Http) { }

// Método Get para obtener la lista de objetos.
// 
    get(): Promise<Cliente[]> {
        console.log(this.http.get(this.url)); // THE ERROR IS HERE
        return this.http.get(this.url)        // AND HERE IN 
                   .get(this.url)
                   .toPromise()
                   .then(response => response.json().data as Cliente[])
                   .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.error('Ha habido un error con la solicitud '+this.url, error);
        return Promise.reject(error.message || error);
    }

}

clientes-data.service.ts

import { InMemoryDbService } from 'angular2-in-memory-web-api';
export class ClientesData implements InMemoryDbService {
    createDb() {
        let clientes = [
           { id: '1', nombre: 'Pepe' },
           { id: '2', nombre: 'Juan' },
           { id: '3', nombre: 'Paco' },
           { id: '4', nombre: 'Chema' }
        ];
        return {clientes};
     }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';

// Imports for loading & configuring the in-memory web api
import { XHRBackend } from '@angular/http';

import './rxjs-extensions';
import { AppComponent } from './app.component';
import { routing } from './app.routing';

/** DATAS SERVICE */
import { ClientesData } from './components/apis/clientes-data.service';

/** PIPES */
import { KeyArrayPipe } from './components/pipes/keyArray.pipe';

import { MainComponent } from './main.component';
import { HeaderComponent } from './header.component';
import { FooterComponent } from './footer.component';
import { NavLeftComponent } from './nav-left.component';
import { DashboardComponent } from './components/dashboard.component';
import { ListadoComponent } from './components/listado.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    routing,
    HttpModule,
InMemoryWebApiModule.forRoot(ClientesData),
  ],
  declarations: [
    AppComponent, 
    MainComponent, 
    HeaderComponent, 
    FooterComponent, 
    NavLeftComponent,
    DashboardComponent,
    ListadoComponent,
    KeyArrayPipe
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{
 "name": "angular2-tour-of-heroes",
 "version": "0.1.0",
 "scripts": {
   "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
   "lite": "lite-server",
   "postinstall": "typings install",
   "tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
 },
 "dependencies": {
   "@angular/common": "2.0.0-rc.6",
   "@angular/compiler": "2.0.0-rc.6",
   "@angular/compiler-cli": "0.6.0",
   "@angular/core": "2.0.0-rc.6",
   "@angular/forms": "2.0.0-rc.6",
   "@angular/http": "2.0.0-rc.6",
   "@angular/platform-browser": "2.0.0-rc.6",
   "@angular/platform-browser-dynamic": "2.0.0-rc.6",
   "@angular/router": "3.0.0-rc.2",
   "@angular/upgrade": "2.0.0-rc.6",
   "angular2-in-memory-web-api": "0.0.18",
   "concurrently": "^2.2.0",
   "core-js": "^2.4.1",
   "reflect-metadata": "^0.1.3",
   "rxjs": "5.0.0-beta.11",
   "systemjs": "0.19.27",
   "zone.js": "^0.6.17"
 },
 "devDependencies": {
   "concurrently": "^2.2.0",
   "lite-server": "^2.2.2",
   "typescript": "^1.8.10",
   "typings": "^1.3.2"
 }
}

Thanks!!

Answer 1

There might be few issues with the way you try to get the data and the error might be because you don't point to the right endpoint, so there is no data.

1. If you didn't change the default API base for that collection (check docs here) it means you need to change private url = '/app/components/apis/clientes-data'; into private url = 'app/clientes-data';
2. On top of the first change, you need to be very careful to the collection name. Right now you are trying to fetch a collection that does not exist. Your collection is called clientes and not clientesData (this is the service name). I recommend looking at John Papa's example, where you can easily see the differences. Try to follow that way in order to get it work.

Please try to change private url = '/app/components/apis/clientes-data'; into private url = '/app/clientes'; and see if you still have the error.