Angular 2 2.0.0-rc.1 Property 'map' does not exist on type 'Observable<Response>' not the same as issue report

Question

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"
}

Answer 1

did you try with this import? it works for me

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

Answer 2

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.

Answer 3

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

import 'rxjs/Rx'; 

Answer 4

Nothing except

import { Observable } from 'rxjs/Rx';

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

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.

Answer 11

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.

Answer 12

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
  ]
}

Answer 13

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.

Answer 14

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.

Answer 15

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.

Answer 16

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'