Property 'map' does not exist on type 'Observable' after upgrading rxjs to 6

Question

I upgraded my Angular application from version 5.2 to 6.0 with the instructions from https://update.angular.io.

Now my Angular application doesn't build because of the "rxjs-5-to-6-migrate" migration:

ERROR in bla.ts: error TS2339: Property 'map' does not exist on type 'Observable'.

I have the following imports:

import { Observable } from 'rxjs/observable';
import { of } from 'rxjs/observable/of';
import { map } from 'rxjs/operators';

If I change the imports like this it works:

import { Observable } from 'rxjs/observable';
import 'rxjs/Rx';

But I don't understand why... I want to use the explicit imports and not import all operators.

UPDATE: As some answers pointed out I have to use pipes to be able to use operators. This was my problem because I thought I can still chain the operators to the observables.

Old Style:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

this.http.get('/api/appsettings/get').map(data => { return true; }).catch(() => { return Observable.of(false); });

New Style

import { of,  Observable } from 'rxjs';
import { catchError, map } from 'rxjs/operators';

this.http.get('/api/appsettings/get').pipe(map(data => { return true; }), catchError(() => { return of(false); }));

have you tried ``import 'rxjs/add/operator/map';`` ? – CruelEngine May 18 '18 at 13:30 — CruelEngine, May 18 '18 at 13:30
try with `import { map } from 'rxjs/operators';` – Michael Doye May 18 '18 at 13:30 — Michael Doye, May 18 '18 at 13:30

score 5 · Answer 1 · edited May 18 '18 at 14:21

5

Everything is explained here in the RxJS v5.x to v6 Update Guide

Import operators only from 'rxjs/operators' and "creation" operators 'rxjs':

import { map } from 'rxjs/operators';
import { of } from 'rxjs';

Importing from rxjs/Rx works only because you added rxjs-compat package. You shouldn't use it after you upgrade to RxJS 6.

edited May 18 '18 at 14:21

msanford

11,803
11
66
93

answered May 18 '18 at 13:31

martin

93,354
25
191
226

Vitalii Bobrov · Accepted Answer · 2018-05-18T13:54:47.873

5

You need to use pipe method on Observable and pass map function inside, like:

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

of([1,2,3]).pipe(
  map(i => i*2)
);

edited May 18 '18 at 13:54

answered May 18 '18 at 13:33

Vitalii Bobrov

191
6

1

This answer makes an additional important note about what OP will need to do moving forward _beyond_ just fixing the import. – msanford May 18 '18 at 13:40
Actually, this will work only until you have `rxjs-compat` installed. In RxJS 6 both `'rxjs/observable'` and `'rxjs/observable/of'` don't exist any more. – martin May 18 '18 at 13:51
sure, fixed imports – Vitalii Bobrov May 18 '18 at 13:55
1

Thank you! Your answer helped me to find my real problem. I updated my question for other people to reflect my actual problem. – Shamshiel May 18 '18 at 13:57

score 1 · Answer 3 · answered May 18 '18 at 13:37

Your imports should look like this now:

import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';

And you can't use Observable.of you have to use of()

And you need to wrap any operator inside a .pipe like so:

.pipe(
     finalize(() => { this.isBusy = false; }),
     take(1),
     map(DATA => DATA.MESSAGEID)
)

Property 'map' does not exist on type 'Observable' after upgrading rxjs to 6

3 Answers3

Linked