Question

所以，我看过其他关于类似问题的帖子，但没有一个解决方案有帮助。

我也在IntelliJ IDEA 15中进行此开发，而不是Visual Studio。我目前使用的是Typescript 2.0.3。

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}
    });
}

修改1：

这是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

在您问题的代码中，您似乎正在执行以下操作：您已导入decorate并且您导入/添加了Subject运算符。因此，您收到TypeScript错误的原因有点神秘。但是，您最近对该问题的编辑确实提出了一种可能性。

很明显，map导入NPM模块：NGRXWebsocketService。该模块在angular2-websocket/angular2-websocket上有一个dependency。请注意，这是rxjs@5.0.0-beta.12和不 a dependency。

您的peerDependency层次结构中有两个独立的rxjs模块完全有可能：您的应用中使用了一个模块（因此在{{1}中}}和node_modules中使用的另一个。如果是这种情况，TypeScript会认为WebsocketEffects返回的类型与您导入的类型以及添加了angular2-websocket/angular2-websocket运算符的类型不同（尽管它们都被称为getSubject }）。

您可以通过向map课程添加一些临时代码来验证是否真的如此：

Subject

如果WebsocketEffects使用单独的temp() { let subject: Subject<any> = this.ngrxWebSocketService.getSubject(); }安装，您应该会看到如下错误：

angular2-websocket/angular2-websocket

您还可以运行以下NPM命令列出rxjs目录下的TS2322: Type 'Subject<any>' is not assignable to type 'Subject<any>'.安装：

rxjs

node_modules作者应该解决多个npm list rxjs模块安装的这种可能性。但是，如果您确实有多个安装，那么您可以对此进行一些操作（因为rxjs版本相同）。如果您卸载并重新安装angular2-websocket/angular2-websocket，它应该使用您在应用中使用的rxjs模块（而不是自己安装）。

实际上，angular2-websocket/angular2-websocket中的所有依赖项都应该是对等依赖项和不是依赖项。我建议您将其提升为issue。

Answer 2

这看起来像手动编译时的输入问题。

在IDE中进行编译时，IDE可能具有内部类型配置，这在项目设置中不存在。

npm install typings -g

检查您的package.json dependencies。

ES6-垫片

如果es6-shim中有dependencies，请在项目目录中创建typings.json：

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

芯-JS

如果core-js中有dependencies，请在项目目录中创建typings.json：

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

typings install
尝试手动编译。

Answer 3

尝试导入map：

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

Answer 4

查看angular2-websocket的{{3}}看起来getDataStream()会返回发出source code的主题。

试试这个：

@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';应解决所有问题

Answer 6

我尝试：

import 'rxjs/add/operator/map'

从这里： https://github.com/webmaxru/pwa-workshop-angular/issues/2 并工作正常：）

Answer 7

对于RXJS v6，您必须将pipe（）与map（）结合使用。

 this.ngrxWebSocketService.getSubject().pipe(
    map((websocketUpdate: WebsocketMessage) => {
        let message = JSON.parse(websocketUpdate.data);
        return{ type: message.action, payload: message.payload}
    }) 
 );

希望此修复程序会有所帮助。

Answer 8

'dialog'

这有助于我使用最新版本的angular和rxjs。基本上，您需要使用管道而不是map，并在管道中调用rxjs map函数

“主题＆lt; {}＆gt;”类型中不存在媒体“地图”

8 个答案:

ES6-垫片

芯-JS