CODEWITHSUNDEEP
typescriptangularrxjs
Dan Soltesz
Dan Soltesz

Reputation: 886

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

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

Upvotes: 61

Views: 46133

Answers (16)

The Aelfinn
The Aelfinn

Reputation: 16898

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'

Upvotes: 0

Hasnain Bukhari
Hasnain Bukhari

Reputation: 468

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.

Upvotes: 1

Varun Kumar
Varun Kumar

Reputation: 2751

Nothing except 

import { Observable } from 'rxjs/Rx';

Upvotes: 6

Huy Nguyen
Huy Nguyen

Reputation: 31

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.

Upvotes: 2

ravi punjwani
ravi punjwani

Reputation: 506

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.

Upvotes: 0

Eric Weiss
Eric Weiss

Reputation: 938

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.

Upvotes: 59

Ryan Park
Ryan Park

Reputation: 1

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.

Upvotes: 0

NeshDev
NeshDev

Reputation: 186

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

import 'rxjs/Rx';

Upvotes: 14

Apostolos
Apostolos

Reputation: 10463

did you try with this import? it works for me

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

Upvotes: 69

user1322772
user1322772

Reputation:

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.

Upvotes: 0

David Driscoll
David Driscoll

Reputation: 1419

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.

Upvotes: 4

iTrout
iTrout

Reputation: 1454

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.

Upvotes: 2

Niall Crosby
Niall Crosby

Reputation: 2411

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

Upvotes: 0

Simon Vane
Simon Vane

Reputation: 2014

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.

Upvotes: 1

Eric Weiss
Eric Weiss

Reputation: 938

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.

Upvotes: 3

tomaszbak
tomaszbak

Reputation: 8287

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.

Upvotes: 1

Related Questions