Ionic 3 update problem with Http

Ionic Framework ionic-v3
1

Hi.

I just updated my project from ionic 2 to ionic 3 following this guide: Guide: How to update to Ionic 3.X

However my problem is that now I’m getting the following error:

Typescript Error
Property 'map' does not exist on type 'Observable<Response>'.
path/src/pages/home/home.ts
  this.http.get('http://localhost:8100/sync/checktime.php?now='+most).map(res => res.json()).subscribe(data => {
      if (data.status == 'error')

Any idea what else I need to update/change?

Thank you.

2

need to import all additional operators or functionalities of an Observable

import 'rxjs/add/operator/map'
3

Thank you.

Small typo by the way you open single quote and close double quote.

Do I need to do this on every page separately which uses the http module or can I do it just once in app.module.ts ?

4

fixed thank :).

Best practices you will put this in a central place or even in its own file when you need more imports than the map operator.

app.module.ts should be fine

5

Thank you, maybe it’s worth considering adding this information to some kind of documentation, or did I just missed that?

6

nothing to mention in the docs for ionic. its basic angular stuff… there you need to import the parts on your own since final 2.0 release

7

Ok thank you.

That’s odd I’m new to both Angular and Ionic as well, I started using it about 2 month ago and my first project was based on documentation of ionic 2, and never needed to import the additional functionalities, only now that I have updated to ionic 3.

8

There are a couple of issues here.

First, if you import Observable from rxjs/Observable, you need to import individual operators. If you import Observable from rxjs (which you may have been doing before), all the operators are already available to you (at the cost of app binary bloat).

A second issue involves lazily loaded pages. If you import (for example) map in lazy page A, it won’t be available in lazy page B. There is a kludgy workaround that may or may not continue to work that involves importing it in app.component.ts. See this discussion for more details.

1 Like