The 'map' property does not exist in the type 'Subject <{}>'

Question

So, I saw several other posts about similar problems, but none of the solutions helped.

I am also doing this development in IntelliJ IDEA 15, and not Visual Studio. I'm on Typescript 2.0.3 now.

 import { Injectable } from '@angular/core'; import { Effect, StateUpdates, toPayload } from '@ngrx/effects'; import { Subject } from 'rxjs/Subject'; import 'rxjs/add/operator/mergeMap'; import 'rxjs/add/observable/dom/webSocket' import 'rxjs/add/operator/map'; import { AppState } from '../reducers'; import { NGRXWebSocketService } from '../shared/ngrxWebsocket.service'; import { BASE_URL } from "../shared/ngrxWebsocket.service"; export interface WebsocketMessage { data: string } @Injectable() export class WebsocketEffects { constructor(private updates$:StateUpdates<AppState>, private ngrxWebSocketService: NGRXWebSocketService) { } @Effect() _recieve$ = this.ngrxWebSocketService.getSubject() .map((websocketUpdate: WebsocketMessage) => { let message = JSON.parse(websocketUpdate.data); return{ type: message.action, payload: message.payload} }); } 

Change 1:

Here is the NGRXWebsocketService.

 import {Injectable} from '@angular/core'; import {$WebSocket, WebSocketConfig} from 'angular2-websocket/angular2-websocket' export const BASE_URL = 'ws://' + location.hostname + ':9000/socket'; @Injectable() export class NGRXWebSocketService { private socket: $WebSocket; constructor() { this.socket = new $WebSocket(BASE_URL); } public sendRequest(request) { return this.socket.send(request); } public reconnect() { this.socket = new $WebSocket(BASE_URL); } public getSubject() { return this.socket.getDataStream(); } } 

Answer 1

Try importing map :

 import {map} from 'rxjs/operator/map'; 

Answer 2

In the code of your question, you seem to be doing what is required: you imported Subject , and you imported / added the map operator. So this is a bit of a mystery why you get a TypeScript error. However, your recent editing of a question raises one of the possibilities.

Obviously, NGRXWebsocketService imports the NPM module: angular2-websocket/angular2-websocket . And this module has dependency on [email protected] . Note that this is a dependency and not a peerDependency .

It is possible that you have two separate rxjs modules in your node_modules hierarchy: one that is used in your application (and therefore in WebsocketEffects ), and another that is used in angular2-websocket/angular2-websocket . If so, TypeScript will consider the type returned by getSubject to be different from the type you import and to which you added the map operator (even though they are both called Subject ).

You can check if this is really happening by adding temporary code to the WebsocketEffects class:

 temp() { let subject: Subject<any> = this.ngrxWebSocketService.getSubject(); } 

If angular2-websocket/angular2-websocket uses a separate rxjs installation, you should see an error like this:

 TS2322: Type 'Subject<any>' is not assignable to type 'Subject<any>'. 

You can also run the following NPM command to display the rxjs settings that are in your node_modules directory:

 npm list rxjs 

This potential for multiple installations of rxjs modules is what should be addressed by the author of angular2-websocket/angular2-websocket . However, if you have several installations, there is something you could do about it (since the rxjs versions rxjs identical). If you remove and reinstall angular2-websocket/angular2-websocket , it should use the rxjs module that you use in your application (instead of installing its own).

In fact, all dependencies in angular2-websocket/angular2-websocket should be equal and not dependent. I would recommend you do this as an issue .

Answer 3

This seems like a typing issue during manual compilation.

When compiled in the IDE, the IDE may have an internal input configuration that does not exist in your project settings.

• npm install typings -g

• Check package.json dependencies .

  ES6 gasket

  If you have es6-shim in dependencies , create typings.json in the project directory:

   { "globalDependencies": { "es6-shim": "registry:dt/es6-shim", "node": "registry:dt/node" } } 

  core-js

  If you have core-js in dependencies , create typings.json in the project directory:

   { "globalDependencies": { "core-js": "registry:dt/core-js", "node": "registry:dt/node" } } 

• typings install

• Try manual compilation.

Answer 4

Looking at the source code for angular2-websocket , it looks like getDataStream() returns an object that emits a MessageEvent .

Try the following:

 @Effect() _receive$ = this.ngrxWebSocketService.getSubject() .map((messageEvent: MessageEvent) => { let message = JSON.parse(messageEvent.data); return { type: message['action'], payload: message['payload'] }; }); 

Answer 5

import 'rxjs/Rx'; must fix all problems