202

I just upgraded from Angular 2 beta16 to beta17, which in turn requires rxjs 5.0.0-beta.6. (Changelog here: https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta17-2016-04-28) In beta16 all was working well regarding Observable/map functionality. The following errors appeared after I upgraded and occur when typescript attempts to transpile:

  1. Property 'map' does not exist on type 'Observable' (anywhere where I've used map with an observable)
  2. c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16): error TS2435: Ambient modules cannot be nested in other modules or namespaces.
  3. c:/path/node_modules/rxjs/add/operator/map.d.ts(2,16): error TS2436: Ambient module declaration cannot specify a relative module name.

I have seen this question/answer but it does not solve the problem: Observable errors with Angular2 beta.12 and RxJs 5 beta.3

My appBoot.ts looks like this (am already referencing rxjs/map):

///<reference path="./../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
[stuff]
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import {enableProdMode} from 'angular2/core';
import { Title } from 'angular2/platform/browser';


//enableProdMode();
bootstrap(AppDesktopComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

Does anybody have any idea what is going haywire?

1

16 Answers 16

283

You need to import the map operator:

import 'rxjs/add/operator/map'
5
  • 3
    The Angular team and the RxJS team both DO NOT recommend this approach of importing the entire RX like this. You should not do that. It is too large. The first answer above is fine, but the second one, not so much. @0x1ad2 can you update your answer to not include that massive import as a second option?
    – frosty
    Aug 24, 2017 at 23:01
  • 2
    This is non-intuitive. Where is this documented as a dependency to implementing Observable in an Angular 2+ development?
    – Joe
    Dec 18, 2017 at 23:43
  • Is this applicable to ionic 3.20.0? I got the same issue because ionic didn't automatically imported the map. Importing explicitly works but I'm not sure it this is correct. Mar 21, 2018 at 5:49
  • 1
    this does not fix the issue to many for me I had to use Pipe to instead of rxjs/add/operator/map I used rxjs/operators import with pipe and .pipe(map(res=>res.json()));
    – codefreaK
    May 20, 2018 at 19:19
  • I got here after some Google searches in a time where we are now using Angular 7 and RXJS has gone through some changes. The new method is import { map } from 'rxjs/operators', but another answer has more details.
    – CTheCheese
    Nov 19, 2018 at 22:48
78

I upgraded my gulp-typescript plugin to the latest version (2.13.0) and now it compiles without hitch.

UPDATE 1: I was previously using gulp-typescript version 2.12.0

UPDATE 2: If you are upgrading to the Angular 2.0.0-rc.1, you need to do the following in your appBoot.ts file:

///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>
import { bootstrap } from "@angular/platform-browser-dynamic";
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from "./path/AppComponent";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
// import 'rxjs/Rx'; this will load all features
import { enableProdMode } from '@angular/core';
import { Title } from '@angular/platform-browser';



//enableProdMode();
bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    Title
]);

The important thing being the reference to es6-shim/index.d.ts

This assumes you have installed the es6-shim typings as shown here: enter image description here

More on the typings install from Angular here: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings

7
  • Can you please mention the old version number that had the problem? Thanks.
    – Meligy
    May 1, 2016 at 0:12
  • 1
    @Meligy I was previously using gulp-typescript version 2.12.0
    – brando
    May 1, 2016 at 2:02
  • 1
    Awesome. I have updated my article about the map error message to include a note for users with similar issues. Thanks a lot :)
    – Meligy
    May 1, 2016 at 6:26
  • 1
    @Meligy I had this same problem again when I upgraded to the Angular2 RC. I updated my answer above to show how I solved it.
    – brando
    May 5, 2016 at 0:56
  • 6
    import 'rxjs/Rx'; // Loads all features
    – VahidN
    May 10, 2016 at 10:55
68

Rxjs 5.5 “ Property ‘map’ does not exist on type Observable.

The problem was related to the fact that you need to add pipe around all operators.

Change this,

this.myObservable().map(data => {})

to this

this.myObservable().pipe(map(data => {}))

And

Import map like this,

import { map } from 'rxjs/operators';

It will solve your issues.

2
  • 3
    This also applies to Rxjs 6. Every tutorial that I look at, they have the map function without pipe. This didn't work for me until I added pipe and imported map from 'rxjs/operators' exactly as the answer states.
    – Saturn K
    Jul 27, 2018 at 18:41
  • Yes, it also applies to Rxjs 6 as well. Jul 30, 2018 at 11:11
41

In my case it wouldn't enough to include only map and promise:

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

I solved this problem by importing several rxjs components as official documentation recommends:

1) Import statements in one app/rxjs-operators.ts file:

// import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Observable

// See node_module/rxjs/Rxjs.js
// Import just the rxjs statics and operators we need for THIS app.

// Statics
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

2) Import rxjs-operator itself in your service:

// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';
1
  • Yet again, the best answer on the question doesn't have the most votes. This is the best answer for this question. Thank you for sharing. I wish that others would vote this up.
    – frosty
    Aug 24, 2017 at 23:02
26

If you happen to see this error in VS2015, there's a github issue & workaround mentioned here:

https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507

This did help me resolve the property map does not exist on observable issue. Besides, make sure you have typescript version above 1.8.2

3
  • 8
    Replacing C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js with typescriptService worked for VS 15. (restart vs after replacing file)
    – tchelidze
    May 28, 2016 at 9:57
  • replacing the above mentioned file worked for me too
    – Krishnan
    Jul 12, 2016 at 14:53
  • Still no update from microsoft... Why they aren't fixing it?
    – Piotrek
    Aug 16, 2016 at 10:42
26

THE FINAL ANSWER FOR THOSE WHO USES ANGULAR 6:

Add the below command in your *.service.ts file"

import { map } from "rxjs/operators";

**********************************************Example**Below**************************************
getPosts(){
this.http.get('http://jsonplaceholder.typicode.com/posts')
.pipe(map(res => res.json()));
}
}

I am using windows 10;

angular6 with typescript V 2.3.4.0

1
  • Looks like we can no longer just import it in the app.module.ts. Now we need to import it in each service and component Aug 28, 2018 at 3:21
16
import 'rxjs/add/operator/map';

&

npm install rxjs@6 rxjs-compat@6 --save

worked for me

13

In Angular 2x

In example.component.ts

import { Observable } from 'rxjs';

In example.component.html

  Observable.interval(2000).map(valor => 'Async value');

In Angular 5x or Angular 6x:

In example.component.ts

import { Observable, interval, pipe } from 'rxjs';
import {switchMap, map} from 'rxjs/operators';

In example.component.html

valorAsync = interval(2500).pipe(map(valor => 'Async value'));
1
  • 1
    why we need to use pipe instead map directly?
    – Krish
    Jul 12, 2018 at 4:09
10

UPDATE Sep 29 2016 for Angular 2.0 Final & VS 2015

The workaround is no longer needed, to fix you just need to install TypeScript version 2.0.3.

Fix taken from the edit on this github issue comment.

3
  • 3
    I have this issue, I also have 2.0.3 installed :/
    – Mild Fuzz
    Nov 1, 2016 at 14:45
  • 1
    i have TS 2.1.6 but still seeing the issue
    – alltej
    Mar 7, 2017 at 8:45
  • At the time of this comment, TS latest is 2.5.2. This version is breaking for me. Using 2.3.x works.
    – PigBoT
    Oct 26, 2017 at 15:50
10

As I understand it is because of rxjs last update. They have changed some operators and syntax. Thereafter we should import rx operators like this

import { map } from "rxjs/operators";

instead of this

import 'rxjs/add/operator/map';

And we need to add pipe around all operators like this

this.myObservable().pipe(map(data => {}))

Source is here

9

As Justin Scofield has suggested in his answer, for Angular 5's latest release and for Angular 6, as on 1st June, 2018, a mere import 'rxjs/add/operator/map'; isn't sufficient to remove the TS error: [ts] Property 'map' does not exist on type 'Observable<Object>'.

It's necessary to run the below command to install the required dependencies: npm install rxjs@6 rxjs-compat@6 --save after which the map import dependency error gets resolved!

1
  • 1
    Looks like more breaking changes which is a worrying
    – Noobie3001
    Jun 9, 2018 at 8:51
8

I was facing the similar error. It was solved when I did these three things:

  1. Update to the latest rxjs:

    npm install rxjs@6 rxjs-compat@6 --save
    
  2. Import map and promise:

    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/toPromise';
    
  3. Added a new import statement:

    import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
    
7

It looks like latest RxJS requires typescript 1.8 so typescript 1.7 reports the above error.

I solved this issue by upgrading to the latest typescript version.

1
6

Similar error messages will pop up when transitioning from version 5 to 6. Here is an answer for the change to rxjs-6.

Import the individual operators, then use pipe instead of chaining.

import { map, delay, catchError } from 'rxjs/operators'; 

source.pipe(
  map(x => x + x),
  delay(4000),
  catchError(err => of('error found')),
).subscribe(printResult);
6

If you are using angular4 the use below import. it should work .

import 'rxjs/add/operator/map';

If you are using angular5/6 then use map with pipe and import below one

import { map } from "rxjs/operators";

1

property 'map' does not exist on type 'observable response ' angular 6

Solution: Update Angular CLI And Core Version

ng update @angular/cli           //Update Angular CLi 
ng update @angular/core          //Update Angular Core 
npm install --save rxjs-compat   //For Map Call For Post Method 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.