Property 'distinct' does not exist on type Observable<CustomType> #1560

Closed
SuperManitu opened this Issue Mar 30, 2016 · 21 comments

Projects

None yet

3 participants

@SuperManitu

My initial problem was here: http://stackoverflow.com/questions/36245443/add-data-to-observable
Now I figured out a solution by myself, using merge and map/filter. For this to work, I need the distinct Operator to kill double values, but my typescript complains that distinct is not part of the Observable, only distinctUntilChanged

RxJS version:
beta.2 and beta.4

Code to reproduce:
https://plnkr.co/edit/VAM0chq0VzQ90nA9AmcW
see in the console that distinct is not a function

Expected behavior:
I can use distinct as Operator

Actual behavior:
I cannot use it

Additional information:
using atom-ts for compiling typescript

@kwonoj
Member
kwonoj commented Mar 30, 2016

Import Rx.kitchensink for extended operators, kitchenSink serves as full battery included including distinct operator. https://github.com/ReactiveX/rxjs/blob/master/src/Rx.KitchenSink.ts#L9 .

Closing issue, please feel freely reopen if it's not resolved.

@kwonoj kwonoj closed this Mar 30, 2016
@kwonoj
Member
kwonoj commented Mar 30, 2016

Also one thing forgot, you may able to import distinct separately after import core rx as similar to

// patch Observable with appropriate methods
require('rxjs/add/operator/map');

Observable.of(1,2,3).map(function (x) { return x + '!!!'; }); // etc

(cjs example, but typescript works same way)

@SuperManitu

I tried that and it didnt work, but your first comment seems to work, thanks!

@SuperManitu

how do I import the Rx.KitchenSink into my app? In the bundles folder is no js file for it, so system.js trys to get it from the server

@SuperManitu

Ok, doesnt work at all, reopening now

@kwonoj kwonoj reopened this Mar 31, 2016
@kwonoj
Member
kwonoj commented Mar 31, 2016

@SuperManitu , please check this plnkr at https://plnkr.co/edit/AF8TyxiIRbokxVBK27Iu . I've amended your pnlkr above.

changes are

  • load kitchensink build for system js
  • import rx from kitchensink : `import * as Rx from '.../kitchenSink'
@SuperManitu

The KitchenSink build seems not to be part of the npm package, the only way to get it is the cdn
My compiler still doesnt like the distinct operator, but i can emit the js that is working fine.
Any ideas how to get rid of the compile error message?

@zachgrayio

I've been trying to import these additional operators into an angular2 + webpack project with no joy, and I've tried all of the typical solutions. If I recall, I had some success using the import 'rxjs/add/operator/...' method under system.js but have since moved away from system.js all together. Wondering if anyone has any thoughts on this?

@kwonoj
Member
kwonoj commented Apr 15, 2016

@zachgrayio would you mind to share some snippets to reproduce issue?

@kwonoj
Member
kwonoj commented Apr 15, 2016

@SuperManitu , I could confirm npm package also includes kitchenSink as well. If you're problem persists with b.6, would you share bare minimum repo to able to reproduce issue?

@zachgrayio

@kwonoj I'll try to get a repo or plunkr up sometime soon, thanks for the attn

@zachgrayio

@kwonoj A bit of relevant info before I get around to uploading something: I'm working with a recent fork of https://github.com/angular/angular2-seed as a starting point, and I've opened an issue over there too as it might be more relevant to webpack than to rxjs: angular/angular2-seed#59

@kwonoj
Member
kwonoj commented Apr 15, 2016

Yes, repo would be helpful. I'm having hand-crafted ng2-rxjs webpack configuration and so far it's working, I think it can be resolved somehow.

@zachgrayio

@kwonoj

Here's an example - i just forked the angular2-seed repo and followed the most common, basic instructions to import additional operators, with no other changes. Maybe this is a bit too naive, but I thought it was a good starting point: zachgrayio/angular2-seed-add-operators@aa40285

@zachgrayio

Here's a branch of the fork'd repo where I tried to resolve using Rx.KitchenSink, still no joy. zachgrayio/angular2-seed-add-operators@fd82bef

@kwonoj
Member
kwonoj commented Apr 15, 2016

@zachgrayio - try this :

package.json

   "dependencies": {
     "angular2": "2.0.0-beta.15",
     "core-js": "^2.2.0",
-    "rxjs": "5.0.0-beta.2",
+    "rxjs": "^5.0.0-beta.6",
     "zone.js": "~0.6.11"
   },

seed-app.ts

import {Observable} from "rxjs/Observable";

-import 'rxjs/add/operator/distinct'
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/distinct';
 // relative paths to node_modules don't work any better:
What's changed?
  1. You should use latest version of rxjs package. Operator patching (module-augmentation) is not implemented in b.2
  2. You should import create method of as well, because import {Observable} imports barebone only without any creation method as well.
@zachgrayio
zachgrayio commented Apr 15, 2016 edited

@kwonoj Ah, ok that makes sense - I had a hunch this might be the case but never followed through. What version of ng2 are you running?

npm ERR! peerinvalid The package rxjs@5.0.0-beta.6 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer angular2@2.0.0-beta.15 wants rxjs@5.0.0-beta.2

@kwonoj
Member
kwonoj commented Apr 15, 2016

Oops, forgot peerdependency - I'm using npm@3 and installed rxjs separately, so it bypasses peerdependency check. At least there's angular/angular#8047 will bump up peerdependency as well.

@kwonoj kwonoj referenced this issue in angular/angular2-seed Apr 15, 2016
Closed

RxJS5 - additional operators & TS typings. #59

@zachgrayio

@kwonoj Awesome, I'll likely do the same thing. Good lookin' out dude!

@zachgrayio

For anyone who ends up here, this is the commit that fixed my operator woes: zachgrayio/angular2-seed-add-operators@cdd825c

If you run into the peer dependency issue due to being ahead of the peerdependency curve, you can install npm3 with sudo npm i -g npm@3 and then npm i will succeed due to it's new dependency resolution model.

@kwonoj
Member
kwonoj commented Apr 24, 2016

I believe latest b.6 correctly exports operator under kitchenSink, closing this issues for now due to inactivity. @SuperManitu , if you're still having troubles to import operators correctly it'd be appreciate to provide snippets / barebone repo to able to reproduce those issues.

@kwonoj kwonoj closed this Apr 24, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment