Ionic Angular Uncaught (in promise) error

Question

I am new to Ionic.

This course on Lynda is my introduction to Ionic and I've been following the instructor tutorial successfully until he introduced providers. My provider file is as follows:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
  Generated class for the PeopleDataProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class PeopleDataProvider {

  constructor(public http: HttpClient) {
    console.log('Hello PeopleDataProvider Provider');
  }

  getPeople(){
    return this.http.get('https://randomuser.me/api/?results=10&nat=us&seed=d07ade5f51ff3011')
    .map(res => res.json())
    .map(res => res.results);
  }

}

My home.ts file is as follows:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { DetailPage } from '../detail/detail';
import { PeopleDataProvider } from '../../providers/people-data/people-data';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [PeopleDataProvider]
})
export class HomePage {

    public people = new Array();
    private detailPage;

  constructor(public navCtrl: NavController, public peopleData:PeopleDataProvider) {

    peopleData.getPeople().subscribe(people => {
      console.log('people',people);
      this.people = people;
    });
    this.detailPage = DetailPage;
  }

  loadDetail(person){
    console.log(person);
    this.navCtrl.push(this.detailPage, {person:person});
  }

}

When the app loads I receive the following error:

Typescript Error

Property 'json' does not exist on type 'Object'.

src/providers/people-data/people-data.ts

return this.http.get('https://randomuser.me/api/?results=10&nat=us&seed=d07ade5f51ff3011') .map(res => res.json()) .map(res => res.results);

This post suggested the introduction of import 'rxjs/add/operator/map'; as the solution.

However, that import does not fix the issue for me.

Extra complication:

The error changes to the following exception after a couple of refreshes to the browser but I can't predict when nor control when it occures:

ionic Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[PeopleDataProvider -> HttpClient]:

I don't know if the two errors are related.

cyberpirate92 · Accepted Answer · 2018-03-24T10:47:47.823

2

You don't have to use map and call .json on the response, those are required only when you are using the old Http instead of HttpClient.

So your method should be like this

PeopleDataProvider

import 'rxjs/add/operator/map';
..
getPeople(){
    return this.http.get<any>('https://randomuser.me/api/?results=10&nat=us&seed=d07ade5f51ff3011')
    .map(res => res.results);
}

As for the following error,

ionic Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[PeopleDataProvider -> HttpClient]:

Make sure you have imported HttpClientModule in your AppModule.

import {HttpClientModule} from '@angular/common/http'

@NgModule({
  imports:      [ .. , HttpClientModule],
  ..
})

Stackblitz

edited Mar 24 '18 at 10:47

answered Mar 24 '18 at 10:35

cyberpirate92

3,076
4
28
46

Thank you for the thorough answer. Can you direct me at the best resource I can refer to which would help me know what has and hasn't been deprecated? It's clear the tutorial I'm following is dated. – sisko Mar 24 '18 at 11:28
I suggest you refer the [official angular](https://angular.io) documentation, deprecated APIs are flagged, for example check this [`Http`](https://angular.io/api/http/Http) doc – cyberpirate92 Mar 24 '18 at 11:30

score 2 · Answer 2 · answered Mar 24 '18 at 10:58

Since you are using HttpClient its obvious u are using Angular 4.3+. After this version .map amd .json() has been removed.. try this---

 getPeople(){
return this.http.get('https://randomuser.me/api/?results=10&nat=us&seed=d07ade5f51ff3011');

}

Remove--

.map(res => res.json())
.map(res => res.results);

Ionic Angular Uncaught (in promise) error

2 Answers2

Stackblitz