Despite proper imports of rxjs, property 'map' does not exist on type 'Observable'

Question

I am building a MEAN stack app using Angular 2.

I know that this question has been asked multiple times on StackOverflow. I've been researching the questions and trying the different suggestions. For most people, importing the entire rx/js library and map, or importing:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

seems to solve the issue. I have been trying different combinations of this, to no avail. I keep getting the error on all instances of .map in my service. I tried updating my global typescript, as well as my typescript version being used in the dependencies. I get the error in my terminal after 'ng serve'. I think this is a typescript issue, but I am not sure - the error is a bit vague now that importing observables does not resolve it.

Package.json

{
  "name": "aether-news",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "@types/googlemaps": "^3.26.8",
    "@types/jquery": "^2.0.43",
    "@types/lodash": "^4.14.62",
    "@types/underscore": "^1.8.0",
    "amcharts3-angular2": "github:amcharts/amcharts3-angular2",
    "angular2-google-maps": "^0.17.0",
    "core-js": "^2.4.1",
    "dotenv": "^4.0.0",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "ng2-google-charts": "^2.1.0",
    "rxjs": "^5.1.0",
    "tslint": "^4.4.2",
    "typescript": "^2.4.2",
    "underscore": "^1.8.3",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.0",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "^2.4.2",
    "upgrade": "^1.1.0"
  }
}

Imports in my service

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

service code

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';


@Injectable()
export class NewsApiService {

  public bingToken: string;
  public bbc: any;
  public bingWorld: any;
  public bingPolitics: any;
  public apNews: any;
  public googleNews: any;
  public economistNews: any;
  public nytNews: any;
  public wapoNews: any;
  public cnnNews: any;
  public newsweekNews: any;
  public reutersNews: any;
  public guardianUkNews: any;
  public guardianAuNews: any;
  public huffPostNews: any;
  public wsjNews: any;

  public eventRegistryBBC: any;
  public eventRegistryGuardian: any;
  public eventRegistryCNN: any;
  public eventRegistryWAPO: any;
  public eventRegistryReuters: any;
  public eventRegistryNYT: any;
  public eventRegistryEconomist: any;
  public eventRegistryAP: any;
  public eventRegistryWSJ: any;
  public eventRegistryNewswire: any;

  constructor(
    private http: Http,
    private router: Router
  ) {}


//EVENT REGISTRY
//BBC
getEventRegistryBBC(){
  return this.http.get("http://eventregistry.org/json/article?sourceUri=bbc.co.uk&sourceUri=bbc.com&categoryUri=dmoz%2FSociety%2FPolitics&action=getArticles&articlesSortBy=date&resultType=articles&articlesCount=200&articlesIncludeArticleDuplicateList=true&articlesIncludeArticleCategories=true&articlesIncludeConceptImage=true&articlesIncludeConceptDescription=true&articlesIncludeConceptDetails=true&articlesIncludeConceptTrendingScore=true&articlesIncludeSourceDescription=true&articlesIncludeArticleImage=true&articlesIncludeSourceDetails=true")
    .map((res) => {
      this.eventRegistryBBC = res.json()
      return res.json().articles.results;
    })
}

Very curious whether people have faced this same issue, even with proper imports of rxjs. Thanks for your assistance.

Could you add the code that is generating this error? Where you are using Observable? — DeborahK, Jul 31 '17 at 20:59
hi @DeborahK, I added my service code. Apologies, the file is quite long - I shortened it to just one API call. — sharedev, Jul 31 '17 at 21:01
Have you seen [this answer](https://stackoverflow.com/questions/42693265/property-map-does-not-exist-on-type-observableresponse-when-using-angular)? — Sergey Karavaev, Jul 31 '17 at 21:07
thanks for your suggestion @SergeyKaravaev. As I mentioned, I upgraded both my global typescript and the typescript version I am using in my dependencies, but still receive the same error. — sharedev, Jul 31 '17 at 21:09
And `import 'rxjs/Rx';` instead of `map` hasn't worked for you either? — Vandesh, Jul 31 '17 at 21:14
Just to confirm, what do you see if you type `tsc -v` at the command prompt? — DeborahK, Jul 31 '17 at 21:29

score 0 · Answer 1 · answered Aug 15 '17 at 03:02

In all of my services, they're typed (see Observable) and they don't have multiple returns - I'm not sure how/if that would work.

My services return this.http.get - etc - and map the response with response.json().

In my component I subscribe to the Observable and do any further data manipulations to extract the specific data.

Maybe try something like this?

getEventRegistryBBC(): Observable<Response>{
  return this.http.get("http://eventregistry.org/json/article?sourceUri=bbc.co.uk&sourceUri=bbc.com&categoryUri=dmoz%2FSociety%2FPolitics&action=getArticles&articlesSortBy=date&resultType=articles&articlesCount=200&articlesIncludeArticleDuplicateList=true&articlesIncludeArticleCategories=true&articlesIncludeConceptImage=true&articlesIncludeConceptDescription=true&articlesIncludeConceptDetails=true&articlesIncludeConceptTrendingScore=true&articlesIncludeSourceDescription=true&articlesIncludeArticleImage=true&articlesIncludeSourceDetails=true")
  .map(response => response.json())
}

Despite proper imports of rxjs, property 'map' does not exist on type 'Observable'

Package.json

Imports in my service

service code

1 Answers1