Angular 2 beta.17: Property 'map' does not exist on type 'Observable<Response>'
TypescriptAngularRxjsTypescript Problem Overview
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
- 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: https://stackoverflow.com/q/36271314/3532945
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?
Typescript Solutions
Solution 1 - Typescript
You need to import the map
operator:
import 'rxjs/add/operator/map'
Solution 2 - Typescript
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:
More on the typings install from Angular here: https://angular.io/docs/ts/latest/guide/typescript-configuration.html#!#typings
Solution 3 - Typescript
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.
Solution 4 - Typescript
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:
-
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';
-
Import rxjs-operator itself in your service:
// Add the RxJS Observable operators we need in this app. import './rxjs-operators';
Solution 5 - Typescript
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
Solution 6 - Typescript
#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
Solution 7 - Typescript
import 'rxjs/add/operator/map';
&
npm install rxjs@6 rxjs-compat@6 --save
worked for me
Solution 8 - Typescript
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'));
Solution 9 - Typescript
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.
Solution 10 - Typescript
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
Solution 11 - Typescript
As Justin Scofield has suggested in his answer, for Angular 5's latest release and for Angular 6, as on 1st June, 2018, just import 'rxjs/add/operator/map';
isn't sufficient to remove the TS error:
[ts] Property 'map' does not exist on type 'Observable<Object>'.
Its 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!
Solution 12 - Typescript
I was facing the similar error. It was solved when I did these three things:
-
Update to the latest rxjs:
npm install rxjs@6 rxjs-compat@6 --save
-
Import map and promise:
import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise';
-
Added a new import statement:
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
Solution 13 - Typescript
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.
Solution 14 - Typescript
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);
Solution 15 - Typescript
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";
Solution 16 - Typescript
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