RxJs pipe and lettable operator `map`: 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable<{}>'

Question

I have this very basic example that uses lettable operator map with pipe from rxjs@5.5:

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

let o = of(1, 2, 3, 4).pipe(
    map((v) => v * 2)
);

But it produces the error Error:(34, 5) TS2684:The 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable<{}>'. What's the problem here?

score 152 · Accepted Answer · answered Nov 09 '17 at 10:02

152

Lettable instance operators should be imported from rxjs/operators:

import { map } from 'rxjs/operators';

As opposed to non-lettable equivalents which are imported from rxjs/operator:

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

To learn more about lettable operator read:

RxJS: Understanding Lettable Operators

answered Nov 09 '17 at 10:02

Max Koretskyi

101,079
60
333
488

2

for others who might google this: `first` is also a lettable operator – LudvigH Nov 30 '17 at 14:52
Thanks! This has got me stuck for many hours when trying out the [demo](https://material.angular.io/components/autocomplete/examples) components of angular materials. They are importing `map` from the non-lettable equivalents – Bnrdo Jan 11 '18 at 01:57
@Bnrdo, yeah, I was confused as well. Good luck – Max Koretskyi Jan 11 '18 at 06:00
7

Frustrating that VSCode seems to choose to automatically import from rxjs/operator/map. – Tom C Jan 17 '18 at 16:33
@TomC, can't help you here – Max Koretskyi Jan 17 '18 at 17:59
2

There are some bundling issues that may require you to do deep imports of pipeable operators in order to reduce your bundle size. In those cases, you will hit this if you accidentally import from `rxjs/operator/map` instead of `rxjs/operators/map`. – Splaktar Feb 07 '18 at 18:42
4

Thanks guys, its a tough one to spot – Joseph King Feb 23 '18 at 15:11
Thanks a lot! as @TomC mentioned, VSCode automatic import is frustrating – Yassine ElBadaoui Mar 05 '18 at 02:54
@AngularInDepth.com Your answer will bloat the bundle size. Your answer should be changed to reflect Splaktar's comment. – adamdport Apr 18 '18 at 13:23
1

Imports must have been clearly shown in all demos =/ – gleitonfranco May 07 '18 at 19:36

RxJs pipe and lettable operator `map`: 'this' context of type 'void' is not assignable to method's 'this' of type 'Observable<{}>'

1 Answers1

Linked