How To Change The Type That An Observable Returns

28 Answers 28

You need to import the map operator:

                import 'rxjs/add together/operator/map'                              

Or more than mostly:

                import 'rxjs/Rx';                              

---

Detect: For versions of RxJS six.x.x and above, you will have to utilise pipeable operators as shown in the code snippet below:

                import { map } from 'rxjs/operators'; import { HttpClient } from '@angular/mutual/http';  // ... export class MyComponent {   constructor(private http: HttpClient) { }   getItems() {     this.http.get('https://instance.com/api/items').pipe(map(data => {})).subscribe(effect => {       panel.log(upshot);     });   } }                              

This is caused by the RxJS team removing support for using See the breaking changes in RxJS' changelog for more info.

From the changelog:

operators: Pipeable operators must at present be imported from rxjs like so: import { map, filter, switchMap } from 'rxjs/operators';. No deep imports.

Edric

xx.9k 12 gold badges 74 silver badges 85 bronze badges

answered May 13, 2016 at xi:23

Thierry TemplierThierry Templier

190k 37 golden badges 384 silverish badges 348 bronze badges

11

• Invalid module proper name in augmentation, module '../../Observable' cannot be constitute. Belongings 'map' does not exist on type 'Observable<Response>'.

  May 13, 2016 at 12:33

• How practice you import the Observable class? Like this: import {Observable} from 'rxjs/Appreciable'; or import {Observable} from 'rxjs/Rx';?

  May 13, 2016 at 12:36

• i am not import this class and then far

  May xiii, 2016 at 12:41

• I am using Athwart 2 RC1 and rxjs 5.0.0-beta2. I have imported Observable as import {Observable} from 'rxjs/appreciable'; and imported map operator like import 'rxjs/add/operator/map'; It was working when I was using Beta 7. I just upgraded to RC1 and information technology broke.

  May 31, 2016 at eleven:25

• Get-go write this command in vs code last of your project and restart the projection. npm install rxjs-compat , than import the map operator.

  Jul 26, 2018 at 11:05

Revisiting this because my solution isn't listed here.

I am running Athwart vi with rxjs vi.0 and ran into this error.

Hither's what I did to fix it:

I changed

                map((response: whatsoever) => response.json())                              

to only be:

                .pipage(map((response: any) => response.json()));                              

I found the set here:

https://github.com/angular/athwart/problems/15548#issuecomment-387009186

Trilarion

9,820 9 gold badges 60 silverish badges 98 bronze badges

answered May 7, 2018 at fifteen:47

Nick HodgesNick Hodges

16.3k 10 gold badges 63 silver badges 125 bronze badges

6

• I'm non certain why the migration tool rxjs-v-to-half dozen-migrate doesn't selection this up? It'south interesting that information technology doesn't accost the do/tap re-mapping which in my environs is still unresolved even though the import tool recognizes it. 90% of my 'unanticipated wasted time' in Athwart development is spent with RxJS document and lawmaking purlieus bug, this is really frustrating.

  May viii, 2018 at 17:x

• This worked for me, I likewise needed to add import { map } from 'rxjs/operators';

  May fourteen, 2018 at 23:57

• Funny, this is exactly how we fixed it on angular 6 upgrade - which brought the latest rxjs as well.

  Jun 2, 2018 at 18:07

• @paul Cheers. Regarding .take hold of, we can employ catchError similar .piping(catchError(this.handleError)) ?

  Jun 6, 2018 at xi:ten

But write this command in the VS Code concluding of your project and restart the project.

                npm install rxjs-compat                              

You need to import the map operator by calculation this:

                import 'rxjs/add/operator/map';                              

d-cubed

964 five gold badges 30 silver badges 53 bronze badges

answered Jun 14, 2018 at 15:31

1

• if it does non work shut all the files and restart the vs studio.

  Aug 12, 2018 at 16:01

For the Athwart 7v

Change

                import 'rxjs/add together/operator/map';                              

To

                import { map } from "rxjs/operators";                              

And

                                  return this.http.become('http://localhost/ionicapis/public/api/products')  .pipe(map(res => res.json()));                              

Rosdi Kasim

22.1k 23 gold badges 122 silverish badges 147 statuary badges

answered Dec five, 2018 at ten:01

Nadeem QasmiNadeem Qasmi

1,741 21 silver badges 14 bronze badges

4

• it helped me @Katana24 equally I saw the correct syntax with piping.

  Jun 12, 2019 at 4:38

• that solution works good in angular x where not need to install rxjs-compat that will give warnings like 'Fix CommonJS or AMD dependencies tin cause optimization bailouts'

  Jul 11, 2020 at xiii:25

• How do you access the JSON object through this? When i try to print the JSON string with console.log(), I but get a Observable<Any> object?

  Nov 2, 2020 at nine:17

• This is the way to go with Athwart 12, apparently. Thanks!

  Sep 3, 2021 at nine:32

I had the same issue with Angular 2.0.1 because I was importing Observable from

                import { Observable } from 'rxjs/Observable';                              

I resolve my trouble on importing Appreciable from this path instead

                import { Appreciable } from 'rxjs';                              

answered Nov 21, 2016 at 20:44

S.GalarneauS.Galarneau

2,114 ane gilded badge 21 silver badges 26 bronze badges

one

• This practice is considered not bundle-size-friendly since that statement imports all operators of Observable (including the ones that you don't apply) into the bundle. Instead, you should import each operator individually. I recommend using "lettable operators", which was introduced in RxJS v5.five to back up ameliorate tree-shaking.

  Oct 27, 2017 at xiv:34

answered Jun four, 2018 at 5:48

1

• Take note of this answer equally anyone doing RxJS v6 volition need to use the .pipage() or none of the operators will work direct off the Appreciable. You'll see an error similar, Property 'share' does not exist on type 'Observable<{}>'

  Jul 26, 2018 at 17:45

In the latest Angular 7.*.*, you lot can try this simply as:

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

Then you can utilise these methods as follows:

                              individual getHtml(): Appreciable<any> {     render this.http.go("../../assets/test-information/preview.html").pipage(       map((res: whatever) => res.json()),       catchError(<T>(fault: any, result?: T) => {         panel.log(error);         return of(result every bit T);       })     );   }                          

Check this demo for more than details.

answered Jan 8, 2019 at 4:47

HearenHearen

six,749 2 gold badges 45 argent badges 57 bronze badges

just install rxjs-compat by typing in final:

              npm install --salve rxjs-compat                          

then import :

              import 'rxjs/Rx';                          

answered Sep 13, 2018 at 9:31

Amir.SouthwardAmir.S

610 8 silver badges 13 bronze badges

In new version of httpClient module in athwart, you have not yet to write it this style:

              render this.http.request(asking)       .map((res: Response) => res.json());                          

but do it this way:

              render this.http.request(request)              .pipe(                map((res: whatsoever) => res.json())              );                          

answered May 23, 2021 at 22:17

mkamalmkamal

131 one silver badge iv statuary badges

              import { map } from "rxjs/operators";  getGetFunction(){ this.http.go('http://someapi') .pipe(map(res => res)); }  getPostFunction(yourPara){ this.http.get('http://someapi',yourPara) .pipe(map(res => res)); }                          

In above function you lot can encounter i didn't use res.json() since im using HttpClient. Information technology applies res.json() automatically and returns Observable (HttpResponse < string>). You no longer need to call this function yourself after athwart 4 in HttpClient.

answered Aug eight, 2019 at 7:07

DushanDushan

951 12 silver badges 20 bronze badges

In my case it wouldn't enough to include only map and promise:

                import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise';                              

I solved this problem past importing several rxjs components as official documentation recommends:

i) Import statements in one app/rxjs-operators.ts file:

                // import 'rxjs/Rx'; // adds ALL RxJS statics & operators to Appreciable  // Run into node_module/rxjs/Rxjs.js // Import just the rxjs statics and operators we need for THIS app.  // Statics import 'rxjs/add/observable/throw';  // Operators import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/switchMap'; import 'rxjs/add/operator/toPromise';                              

2) Import rxjs-operator itself in your service:

                // Add the RxJS Appreciable operators we need in this app. import './rxjs-operators';                              

answered Sep 23, 2016 at 7:23

1

• I experience its not correct to include rxjs-operators in every services. It should be included only at app.module.ts just unfortunately ng examination throws error if operators are not imported in specific places

  Sep 5, 2017 at four:51

I had the same result, I was using Visual studio 2015 which had an older version of typescript.

After upgrading the extension the event got resolved.

Download Link

boxed__l

i,314 one gold bluecoat ten silver badges 24 bronze badges

answered Feb 21, 2017 at 22:58

NaveenNaveen

111 1 gold bluecoat 2 argent badges 8 bronze badges

0

I am using Angular five.2 and when I use import 'rxjs/Rx'; it throws me the following lint mistake: TSLint: This import is blacklisted, import a submodule instead (import-blacklist)

See the screenshot below:

SOLUTION: Solved it by importing only the operators that I needed. Example follows:

                import 'rxjs/add together/operator/map'; import 'rxjs/add/operator/catch';                              

So the prepare would be to import specifically simply the necessary operators.

answered February 2, 2018 at five:36

DevnerDevner

6,307 xi gold badges 58 silver badges 97 statuary badges

1

• @AndrewBenjamin I highly suggest that you exercise that. That will salve you a lot of problem down the lane.

  Mar 12, 2018 at 9:15

I besides faced the same error. I solution that worked for me was to add together the following lines in your service.ts file instead of import 'rxjs/add/operator/map':

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

For an case, my app.service.ts after debugging was like,

                import { Injectable } from '@angular/core'; import { HttpClient } from '@athwart/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators';  @Injectable() export class AppService {     constructor(private http: HttpClient) {}     getData(): Observable<any> {         return this.http.become('https://samples.openweathermap.org/information/2.5/history/city?q=Warren,OH&appid=b6907d289e10d714a6e88b30761fae22')         .pipe(map(result => result));     } }                              

answered Jul 9, 2018 at 19:59

0

Simply install rxjs-compat to solve the problem

              npm i rxjs-compat --save-dev                          

And import information technology like below

              import 'rxjs/Rx';                          

answered Sep iv, 2018 at 10:01

Get-go of all run installation as below:

              npm install --save rxjs-compat@6                          

Now you demand to import rxjs in service.ts:

              import 'rxjs/Rx';                          

Voila! The trouble has been fixed.

Alireza

five,501 11 gold badges 50 silvery badges 116 bronze badges

answered Oct 2, 2018 at two:53

answered Nov eighteen, 2019 at fifteen:35

trustidkidtrustidkid

507 4 silver badges 5 bronze badges

1

• Please don't forget to import 'rxjs/add/operator/map'

  Nov 18, 2019 at 15:37

In Athwart v10.x and rxjs v6.x

Get-go import map top of my service,

import {map} from 'rxjs/operators';

And then I use map similar this

              return this.http.become<return type>(URL)   .piping(map(ten => {     // here return your pattern     return x.foo;   }));                          

answered Oct seven, 2020 at 16:59

ArashArash

1,619 3 gilt badges 18 argent badges 34 statuary badges

I tried all the possible answers posted higher up none of them worked,

I resolved information technology by simply restarting my IDE i.e., Visual Studio Code

May it helps someone.

answered Jun 2, 2018 at 17:39

Shailendra MaddaShailendra Madda

eighteen.9k 15 gold badges 84 silver badges 127 bronze badges

Use the map function in piping office and it volition solve your trouble. You can check the documentation here.

              this.items = this.afs.drove('blalal').snapshotChanges().pipe(map(changes => {   return changes.map(a => {     const information = a.payload.doc.information() as Items;     data.id = a.payload.doc.id;     return information;   }) })                          

Kos

4,453 8 gilt badges 33 silverish badges 39 bronze badges

answered Jul 17, 2018 at 10:40

If after importing import 'rxjs/add together/operator/map' or import 'rxjs/Rx' too you lot are getting the aforementioned mistake and then restart your visual studio code editor, the error will exist resolved.

answered Jul 31, 2018 at 17:02

for all those linux users that are having this problem, bank check if the rxjs-compat folder is locked. I had this exact aforementioned issue and I went in terminal, used the sudo su to give permission to the whole rxjs-compat folder and it was fixed. Thats assuming yous imported

              import 'rxjs/add/operator/map'; import 'rxjs/add/operator/take hold of';                          

in the project.ts file where the original .map error occurred.

answered Jul half dozen, 2018 at nine:24

npm install rxjs@6 rxjs-compat@6 --salvage

answered Aug 12, 2018 at 16:31

Ajay TakurAjay Takur

v,712 five gold badges 34 silver badges 51 statuary badges

answered Jul 30, 2020 at 16:46

D CD C

618 1 gold badge 6 argent badges 15 bronze badges

                              import { Injectable } from '@athwart/cadre';   import { Http } from '@angular/http';   import 'rxjs/add together/operator/map';    @Injectable({   providedIn: 'root'   })   export grade RestfulService {    constructor(public http: Http) { }   //access apis Get Request   getUsers() {  return this.http.become('http://jsonplaceholder.typicode.com/users')   .map(res => res.json());   }   }                          

run the command

                              npm install rxjs-compat                          

I just import

                              import 'rxjs/add/operator/map';                          

restart the vs code, upshot solved.

answered Nov 6, 2018 at 10:02

Nadeem QasmiNadeem Qasmi

1,741 21 silver badges 14 statuary badges

Angular 9:

                              forkJoin([   this.http.become().piping(     catchError((error) => {       render of([]);     })   ),   this.http.get().piping(     catchError((error) => {       render of([]);     })   ),                          

answered Jul 16, 2020 at four:25

Duc NguyenDuc Nguyen

511 7 silver badges 13 bronze badges

If you lot are using this former fashion to get route params

                              this._route.params         .map(params => params['id'])                          

To updated it for new rxjs version

First, import the map from rxjs operators.

              import { map } from 'rxjs/operators';                          

Second add pipage,

                              this._route.params.pipe(             map(params => params['id']))                          

answered May 1, 2021 at 16:35

SunnySunny

889 8 silverish badges xiii bronze badges

The athwart new version does not support .map you accept to install this through cmd npm install --save rxjs-compat via this you can bask with old technique . note: don't forget to import these lines.

                import { Observable, Subject } from 'rxjs'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/take hold of';                              

answered Jul 8, 2019 at 20:45

1

• This late answer is redundant.

  Jul 8, 2019 at 21:05

Not the reply you're looking for? Scan other questions tagged angular typescript1.eight or enquire your own question.

Source: https://stackoverflow.com/questions/37208801/property-map-does-not-exist-on-type-observableresponse

Posted by: fleisherboulciance1971.blogspot.com

Share this post