62

while this looks like same issue as Angular 2 beta.17: Property 'map' does not exist on type 'Observable<Response>'

this is a new version and those solutions don't work for this new released version

I've update to the latest Angular 2 rc1 and can't get things to compile. I had issues with not recognizing 'Promise' I ended up installing es6-promise typing directly to resolve that issue. I have tried putting in various import statements but no luck. I'm running in visual studio 2015

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

return this._http.post(url, null, args).map(extractData).toPromise();

but continue to get the property 'map' does not exist on type 'Observable'

my package file is

"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",


"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",

"bootstrap": "^3.3.6",
"breeze-client": "~1.5.6",
"handlebars": "^4.0.5"
},
"devDependencies": {
"typescript": "^1.8.10",
"typings": "^0.8.1",
"gulp": "^3.9.1",
"jasmine-core": "~2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-coverage": "^0.5.5",
"remap-istanbul": "^0.6.3",
"karma-jasmine": "^0.3.8",
"karma-jasmine-html-reporter": "^0.2.0",
"http-server": "^0.9.0"
}
Community
  • 1
  • 1
Dan Soltesz
  • 898
  • 1
  • 9
  • 16
  • 1
    Did you check http://stackoverflow.com/questions/36947748/angular-2-beta-17-property-map-does-not-exist-on-type-observableresponse? – eko May 04 '16 at 14:41
  • Yeah, that's for a different version and the solution there does not fix the error here. I'm on the latest version per angular.io packages definitions – Dan Soltesz May 04 '16 at 14:55
  • Dan - any luck? I'm here at ng-conf facing the same issue on VS 2015. Banging my head against the wall. – iTrout May 06 '16 at 03:33
  • No unfortunately, it compiles but you still see all these erroneous error in VS. Doesn't matter what you import, they are still there – Dan Soltesz May 07 '16 at 03:25
  • 4
    Quick fix: https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-217960231 – VahidN May 11 '16 at 05:27
  • Not working for me. It works only targeting es6 in tsconfig, not working targeting es5. –  May 12 '16 at 07:32

16 Answers16

70

did you try with this import? it works for me

 import {Observable} from 'rxjs/Rx';
 import 'rxjs/add/operator/map';
Apostolos
  • 10,033
  • 5
  • 24
  • 39
  • 8
    it's worth noting that you have to add import 'rxjs/add/operator/catch for catches as well. (Basically you have to add all the individual functions) – lowcrawler Jun 05 '16 at 01:47
  • this was also good to know when using other Observable methods like `publish()`, needed to `import 'rxjs/add/operator/publish';` for that as well – trickpatty Oct 20 '16 at 17:04
  • Problem show up when importing {Observable} from 'rxjs/Observable'. Instead adding import { Observable } from 'rxjs/Rx'; solves the problem and individual functions need not be imported. – mahoriR Aug 31 '17 at 06:56
59

Here is the workaround. jjokela and VahidN hinted at it also with their comments. I found it by looking at Deborah Kurata's blog post here. She outlines using Angular2 with ASP.NET 4 project template not the new ASP.NET 5 RC template I'm using.

To fix please refer to these instruction found at https://github.com/Microsoft/TypeScript/issues/8518#issuecomment-229506507

This fix is targeted to be included with the Typescript 2.0 release for Visual Studio. Until you can perform the manual steps below.

For VS 2015 (Update 3):

Install VS 2015 Update 3 Replace C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js with the file in https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518-U3/lib/typescriptServices.js. First take a local backup though.

For VS 2015 (Update 2):

Install VS 2015 Update 2 Replace C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js with the file in https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518/lib/typescriptServices.js. First take a local backup though.

For VS 2013:

Install TypeScript 1.8.5 (https://www.microsoft.com/en-us/download/details.aspx?id=48739) Replace C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js with the file in https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518-Dev12/lib/typescriptServices.js. First take a local backup though.

Eric Weiss
  • 938
  • 6
  • 10
  • 1
    I had a similar issue with the "toPromise" extension of rxjs using "es6" compilation (i'm following the current Angular2 tutorial at https://angular.io/docs/ts/latest/tutorial/toh-pt6.html). This workaround fixed the issue, thanks. – Stefano Castriotta Jun 03 '16 at 15:29
  • This worked for me, obviously for Windows only. Had to force shutdown the devenv.exe process for it to take full affect. – John Maloney Jun 16 '16 at 14:27
  • You have mentioned for update 2 and 3. I have VS 2015 update 1 and getting the same issue. How to resolve it? – Aakash Thakur Jan 31 '17 at 19:12
14

I was having the same issue. It seems to have resolved after adding this line to the AppComponent class.

import 'rxjs/Rx';
NeshDev
  • 186
  • 3
6

Nothing except 

import { Observable } from 'rxjs/Rx';
Varun Kumar
  • 2,543
  • 1
  • 23
  • 22
4

The issue is most likely related to https://github.com/Microsoft/TypeScript/issues/7415 which hasn't yet seen a full VS Release. It is possible to build the sources locally and use VS Dev Mode.

David Driscoll
  • 1,399
  • 11
  • 13
  • "Solving" the problem for me was downgrading to rxjs 5.0.0-beta.2. There seems to be a bug with how Visual Studio handles typings. – BobbyTables May 10 '16 at 10:21
  • There is indeed a bug, that has been fixed. There just isn't a released installer yet for it. – David Driscoll May 10 '16 at 20:34
  • The workaround mentioned in the github discussion (replacing typescriptServices.js file with a new one) fixed the VS2015 Typescript intellisense issues for me. – jjokela May 15 '16 at 20:51
3

I'm experiencing the same issue after upgrading to the Angular2 RC. I get VS 2015 Intellisense errors for property 'map' does not exist on type 'Observable'.

I use grunt-ts to do my transpiling so it doesn't effect my ability to transpile but it is annoying seeing it in the editor as errors when they were not there before.

I believe the issue is with the Typescript for Visual Studio download. https://www.microsoft.com/en-us/download/details.aspx?id=48593

It is currently at version 1.8.6 and I believe that it drives the intellisense of Visual Studio and also the build in typescript compilation if that is how you are configuring it. So we might just have to wait for a new version of Typescript for Visual Studio to drop.

Eric Weiss
  • 938
  • 6
  • 10
  • you call tell VS which tool to run by setting external web tools to point .\node_modules\.bin so you build /run with the version that is defined in your package.config – Dan Soltesz May 04 '16 at 18:36
  • But does that control the intellisense also? Or is the typescript intellisense tied in deeper within VS. – Eric Weiss May 04 '16 at 18:38
  • Not sure to be honest but its still nice to make sure you set those tools so you compile to latest version at least ;) – Dan Soltesz May 04 '16 at 19:28
2

Dan - I had a series of issues trying to get a successful run as soon as I added Observable into my code once I upgraded to Angular 2 rc1 as well. What fixed it for me was adding

    "emitDecoratorMetadata": true,

to my tsconfig.json file. Once I added that line, it rendered correctly both in IIS and using npm start. My complete tsconfig.json file is as follows:

{"compilerOptions": {
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true  },  "exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"   ]}

(sorry about the formatting...it's getting late). Hope this helps.

iTrout
  • 1,454
  • 2
  • 12
  • 21
  • 1
    If you don't emit decorators ang2 will not work but that doesn't fix this issue if your using visual studio and want proper IntelliSense. – Dan Soltesz May 07 '16 at 03:29
  • 2
    I finally gave up on Visual Studio and will either use VS Code or Atom to write my Angular 2 code...will continue with "regular" VS for all our APIs. It's a pain to live in 2 IDE worlds but was spending way too much time battling to get simple things working. – iTrout May 08 '16 at 07:13
  • i have the same issue as the poster, and this does not solve the problem. It seems like the reply by David D is the cause – BobbyTables May 10 '16 at 09:59
2

in toPromise.d.ts

add "import {Observable} from '../../Observable';" 

import { ToPromiseSignature } from '../../operator/toPromise';
import {Observable} from '../../Observable';
declare module '../../Observable' {
    interface Observable<T> {
        toPromise: ToPromiseSignature<T>;
    }
}

You can do the same for map.d.ts

Hope this helps.

Huy Nguyen
  • 31
  • 4
1

Your imports are good. The root cause of problem is described on https://github.com/ReactiveX/rxjs/issues/1540

To fix it, you need to upgrade to latest typescript 1.8.

Please note that that when you run tsc you are using global typescript (check tsc -v) To upgrade global typescript, run npm i typescript -g.

If you want to use typescript defined in package.json, you need to execute it via "scripts", i.e. add "build": "tsc" and execute it with npm run build.

tomaszbak
  • 8,247
  • 4
  • 44
  • 37
1

I am having the same issue. I'm running TypeScript 1.8.11. I have no solution I'm afraid. I think it is a genuine issue with either rxjs or angular 2 rc 1.

I downgraded rxjs to beta 2 and it fixed that issue. Unfortunately angular rc1 depends on beta 6 so doing a full npm install fails.

Simon Vane
  • 1,914
  • 3
  • 19
  • 23
1
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions} from '@angular/http';    
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';

return this._http.post(url, null, args).map(this.extractData)

Make Function extractData

Try this one .It will work for you. It is working for me.

Hasnain Bukhari
  • 458
  • 2
  • 6
  • 23
0

i got this working for ag-grid angular 2's component which is here.

i needed the typings for Promise which you get with: tsd install es6-shim

then in your typescript options, specify the downloaded typings file like as one of the files to compile in tsconfig.json, ie:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "lib"
  },
  "files": [
    "typings/es6-shim/es6-shim.d.ts", // the typings file
    "app/boot.ts" // you application
  ]
}
Niall Crosby
  • 2,383
  • 15
  • 16
  • 1
    the es6-shim typing doesn't fix the Observable 'map' issue unfortunately which is resulting in 100's of errors in my project – Dan Soltesz May 05 '16 at 22:47
0

Installing the typings for es6-shim resolved the same issue for me:

typings i es6-shim --ambient --save-dev

It was a breaking change in beta 6 and to get round it you could include a reference to the internal typings files inside angular. Unfortunately these have been removed in 2.0.0-rc.0 so you must rely on the external typings for the same thing now.

Gareth Flowers
  • 1,513
  • 12
  • 23
  • I do have the es6-shim typings and things will build but I still get the erroneous errors inside Visual Studio 2015 even though I have imported rxjs/Rx – Dan Soltesz May 10 '16 at 19:36
0

if you've just upgraded to Angular2 rc1, make sure you're using the new @angular import statements, rather than the angular2: 

`import { Component } from 'angular2/core';`

becomes,

`import { Component } from '@angular/core';`

I know it seems simple, but it can cause this issue.

Ryan Park
  • 1
0

Find beta release 2.0.0 of TypeScript for Visual Studio 2015. This release solved same issue on my machine. But remember, it's a beta.

ravi punjwani
  • 496
  • 4
  • 12
0

If you are upgrading from an Angular2 release-candidate ( i.e. 2.0.0-rc.1 ) to a 2.x.x release, you'll want to:

  1. Update your package.json to be up-to-date with the file at https://github.com/angular/quickstart/blob/master/package.json

  2. Update your systemjs.config.js file to be up-to-date with the file at https://github.com/angular/quickstart/blob/master/systemjs.config.js

  3. Change the import statement to:

    import {Observable} from 'rxjs'

The Aelfinn
  • 13,649
  • 2
  • 54
  • 45