angular 5, RxJs { map } import doesn't work or i'm missing something?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm trying to map the result of my httpclient and we need to use the new import for RxJs to get the treeshaking working.
so i've found 2 map but none work...
import { map } from 'rxjs/operator/map';
import { map } from 'rxjs/operators/map';
the old fashion way that we need to remove
import 'rxjs/add/operator/map';
Here is the code i need to get to work!
getValues(): Observable<Value> {
return this.http.get<Response<Values>>(this.url).map(reponse => {
return reponse.data.values;
});
}
but the .map is not known for the observable,

add a comment |
I'm trying to map the result of my httpclient and we need to use the new import for RxJs to get the treeshaking working.
so i've found 2 map but none work...
import { map } from 'rxjs/operator/map';
import { map } from 'rxjs/operators/map';
the old fashion way that we need to remove
import 'rxjs/add/operator/map';
Here is the code i need to get to work!
getValues(): Observable<Value> {
return this.http.get<Response<Values>>(this.url).map(reponse => {
return reponse.data.values;
});
}
but the .map is not known for the observable,

add a comment |
I'm trying to map the result of my httpclient and we need to use the new import for RxJs to get the treeshaking working.
so i've found 2 map but none work...
import { map } from 'rxjs/operator/map';
import { map } from 'rxjs/operators/map';
the old fashion way that we need to remove
import 'rxjs/add/operator/map';
Here is the code i need to get to work!
getValues(): Observable<Value> {
return this.http.get<Response<Values>>(this.url).map(reponse => {
return reponse.data.values;
});
}
but the .map is not known for the observable,

I'm trying to map the result of my httpclient and we need to use the new import for RxJs to get the treeshaking working.
so i've found 2 map but none work...
import { map } from 'rxjs/operator/map';
import { map } from 'rxjs/operators/map';
the old fashion way that we need to remove
import 'rxjs/add/operator/map';
Here is the code i need to get to work!
getValues(): Observable<Value> {
return this.http.get<Response<Values>>(this.url).map(reponse => {
return reponse.data.values;
});
}
but the .map is not known for the observable,


asked Mar 12 '18 at 18:42


VinceVince
286622
286622
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
The proper "modern" way to import RxJS operators is:
import { map } from 'rxjs/operators';
Along with the use of pipeable operators.
Your code becomes:
getValues(): Observable<Value> {
return this.http.get<Response<Values>>(this.url).pipe(
map(reponse => reponse.data.values)
);
}
Great, everything i've found was about the old fashion, so i didn't know about pipe! so i did find the good import but was not able to use it the correct way ;) thx a lot
– Vince
Mar 12 '18 at 19:01
@Vince You're welcome!
– Jeto
Mar 12 '18 at 19:02
@Jeto do you by any chance know why the 'map' would not get callled?
– FourtyTwo
Dec 11 '18 at 12:34
@FourtyTwo Very hard to say without knowing more about the error you're getting etc. If you can't find it on your own, you may want to create a new question.
– Jeto
Dec 11 '18 at 14:04
add a comment |
Don't add 'map' at the end, in the importing line as you did. Just write the following :
import { map } from 'rxjs/operators';
OR
import { map } from 'rxjs/operator'; .
Also if you are new to angular and more pertinently, working on Angular 2, then the below given should work absolutely fine.
import 'rxjs/add/operator/map';
If it still doesn't works, then you can use the pipe function which could do the work for you. This is how it should look like :
getValues(): Observable<Value> {
return this.http
.get<Response<Values>>(this.url)
.pipe(map(reponse => reponse.data.values)
);
}
add a comment |
Even i used map with Observables in angular2 to make service calls for get post and my service.ts used to look something like this and it was working absolutely fine(Before). I would only import
import {Observable} from "rxjs";
which was sufficient for angular2
public init() : Observable<UserData> {
return this.http.get(this.baseUrl + "/init", this.options)
.map(SharedService.extractJson)
.catch(SharedService.handleError);
}
and the components.ts would look like this
init() {
this.service.init().subscribe((info) => {
this.metaUser = info;
}, (error) => {
console.log(SharedService.getError(error._body));
});
but recently i tried to use the same syntax and was getting the above error. There are some notable changes from 2/4 to the latest Angular and some of the methods are deprecated and there are some changes in the name as well. So the working code (service.ts) looks something like this(these are the bits and pieces of the working code with the corresponding import statements)
import {HttpClient} from "@angular/common/http";
import {Observable, of} from "rxjs";
import {catchError, map, tap} from 'rxjs/operators';
getConfig(): Observable<any> {
return this.http.get(this.getDataUrl)
.pipe(
tap(_ => console.log('fetched data')),
catchError(this.handleError('getData', ))
);}
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
console.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};}
and component looks like this
getData(){
this.serviceData.getConfig().subscribe((info:any)=>{
console.log(info);
},(err:any)=>{
console.log(err);
});
}
those who are curious what does the 'tap' do, here is the explanation written on the angular page
The HeroService methods will tap into the flow of observable values
and send a message (via log()) to the message area at the bottom of
the page.
They'll do that with the RxJS tap operator, which looks at the
observable values, does something with those values, and passes them
along. The tap call back doesn't touch the values themselves.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49242391%2fangular-5-rxjs-map-import-doesnt-work-or-im-missing-something%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
The proper "modern" way to import RxJS operators is:
import { map } from 'rxjs/operators';
Along with the use of pipeable operators.
Your code becomes:
getValues(): Observable<Value> {
return this.http.get<Response<Values>>(this.url).pipe(
map(reponse => reponse.data.values)
);
}
Great, everything i've found was about the old fashion, so i didn't know about pipe! so i did find the good import but was not able to use it the correct way ;) thx a lot
– Vince
Mar 12 '18 at 19:01
@Vince You're welcome!
– Jeto
Mar 12 '18 at 19:02
@Jeto do you by any chance know why the 'map' would not get callled?
– FourtyTwo
Dec 11 '18 at 12:34
@FourtyTwo Very hard to say without knowing more about the error you're getting etc. If you can't find it on your own, you may want to create a new question.
– Jeto
Dec 11 '18 at 14:04
add a comment |
The proper "modern" way to import RxJS operators is:
import { map } from 'rxjs/operators';
Along with the use of pipeable operators.
Your code becomes:
getValues(): Observable<Value> {
return this.http.get<Response<Values>>(this.url).pipe(
map(reponse => reponse.data.values)
);
}
Great, everything i've found was about the old fashion, so i didn't know about pipe! so i did find the good import but was not able to use it the correct way ;) thx a lot
– Vince
Mar 12 '18 at 19:01
@Vince You're welcome!
– Jeto
Mar 12 '18 at 19:02
@Jeto do you by any chance know why the 'map' would not get callled?
– FourtyTwo
Dec 11 '18 at 12:34
@FourtyTwo Very hard to say without knowing more about the error you're getting etc. If you can't find it on your own, you may want to create a new question.
– Jeto
Dec 11 '18 at 14:04
add a comment |
The proper "modern" way to import RxJS operators is:
import { map } from 'rxjs/operators';
Along with the use of pipeable operators.
Your code becomes:
getValues(): Observable<Value> {
return this.http.get<Response<Values>>(this.url).pipe(
map(reponse => reponse.data.values)
);
}
The proper "modern" way to import RxJS operators is:
import { map } from 'rxjs/operators';
Along with the use of pipeable operators.
Your code becomes:
getValues(): Observable<Value> {
return this.http.get<Response<Values>>(this.url).pipe(
map(reponse => reponse.data.values)
);
}
answered Mar 12 '18 at 18:44


JetoJeto
7,01421222
7,01421222
Great, everything i've found was about the old fashion, so i didn't know about pipe! so i did find the good import but was not able to use it the correct way ;) thx a lot
– Vince
Mar 12 '18 at 19:01
@Vince You're welcome!
– Jeto
Mar 12 '18 at 19:02
@Jeto do you by any chance know why the 'map' would not get callled?
– FourtyTwo
Dec 11 '18 at 12:34
@FourtyTwo Very hard to say without knowing more about the error you're getting etc. If you can't find it on your own, you may want to create a new question.
– Jeto
Dec 11 '18 at 14:04
add a comment |
Great, everything i've found was about the old fashion, so i didn't know about pipe! so i did find the good import but was not able to use it the correct way ;) thx a lot
– Vince
Mar 12 '18 at 19:01
@Vince You're welcome!
– Jeto
Mar 12 '18 at 19:02
@Jeto do you by any chance know why the 'map' would not get callled?
– FourtyTwo
Dec 11 '18 at 12:34
@FourtyTwo Very hard to say without knowing more about the error you're getting etc. If you can't find it on your own, you may want to create a new question.
– Jeto
Dec 11 '18 at 14:04
Great, everything i've found was about the old fashion, so i didn't know about pipe! so i did find the good import but was not able to use it the correct way ;) thx a lot
– Vince
Mar 12 '18 at 19:01
Great, everything i've found was about the old fashion, so i didn't know about pipe! so i did find the good import but was not able to use it the correct way ;) thx a lot
– Vince
Mar 12 '18 at 19:01
@Vince You're welcome!
– Jeto
Mar 12 '18 at 19:02
@Vince You're welcome!
– Jeto
Mar 12 '18 at 19:02
@Jeto do you by any chance know why the 'map' would not get callled?
– FourtyTwo
Dec 11 '18 at 12:34
@Jeto do you by any chance know why the 'map' would not get callled?
– FourtyTwo
Dec 11 '18 at 12:34
@FourtyTwo Very hard to say without knowing more about the error you're getting etc. If you can't find it on your own, you may want to create a new question.
– Jeto
Dec 11 '18 at 14:04
@FourtyTwo Very hard to say without knowing more about the error you're getting etc. If you can't find it on your own, you may want to create a new question.
– Jeto
Dec 11 '18 at 14:04
add a comment |
Don't add 'map' at the end, in the importing line as you did. Just write the following :
import { map } from 'rxjs/operators';
OR
import { map } from 'rxjs/operator'; .
Also if you are new to angular and more pertinently, working on Angular 2, then the below given should work absolutely fine.
import 'rxjs/add/operator/map';
If it still doesn't works, then you can use the pipe function which could do the work for you. This is how it should look like :
getValues(): Observable<Value> {
return this.http
.get<Response<Values>>(this.url)
.pipe(map(reponse => reponse.data.values)
);
}
add a comment |
Don't add 'map' at the end, in the importing line as you did. Just write the following :
import { map } from 'rxjs/operators';
OR
import { map } from 'rxjs/operator'; .
Also if you are new to angular and more pertinently, working on Angular 2, then the below given should work absolutely fine.
import 'rxjs/add/operator/map';
If it still doesn't works, then you can use the pipe function which could do the work for you. This is how it should look like :
getValues(): Observable<Value> {
return this.http
.get<Response<Values>>(this.url)
.pipe(map(reponse => reponse.data.values)
);
}
add a comment |
Don't add 'map' at the end, in the importing line as you did. Just write the following :
import { map } from 'rxjs/operators';
OR
import { map } from 'rxjs/operator'; .
Also if you are new to angular and more pertinently, working on Angular 2, then the below given should work absolutely fine.
import 'rxjs/add/operator/map';
If it still doesn't works, then you can use the pipe function which could do the work for you. This is how it should look like :
getValues(): Observable<Value> {
return this.http
.get<Response<Values>>(this.url)
.pipe(map(reponse => reponse.data.values)
);
}
Don't add 'map' at the end, in the importing line as you did. Just write the following :
import { map } from 'rxjs/operators';
OR
import { map } from 'rxjs/operator'; .
Also if you are new to angular and more pertinently, working on Angular 2, then the below given should work absolutely fine.
import 'rxjs/add/operator/map';
If it still doesn't works, then you can use the pipe function which could do the work for you. This is how it should look like :
getValues(): Observable<Value> {
return this.http
.get<Response<Values>>(this.url)
.pipe(map(reponse => reponse.data.values)
);
}
edited May 29 '18 at 10:53
answered May 29 '18 at 10:44


Jitendra AhujaJitendra Ahuja
231318
231318
add a comment |
add a comment |
Even i used map with Observables in angular2 to make service calls for get post and my service.ts used to look something like this and it was working absolutely fine(Before). I would only import
import {Observable} from "rxjs";
which was sufficient for angular2
public init() : Observable<UserData> {
return this.http.get(this.baseUrl + "/init", this.options)
.map(SharedService.extractJson)
.catch(SharedService.handleError);
}
and the components.ts would look like this
init() {
this.service.init().subscribe((info) => {
this.metaUser = info;
}, (error) => {
console.log(SharedService.getError(error._body));
});
but recently i tried to use the same syntax and was getting the above error. There are some notable changes from 2/4 to the latest Angular and some of the methods are deprecated and there are some changes in the name as well. So the working code (service.ts) looks something like this(these are the bits and pieces of the working code with the corresponding import statements)
import {HttpClient} from "@angular/common/http";
import {Observable, of} from "rxjs";
import {catchError, map, tap} from 'rxjs/operators';
getConfig(): Observable<any> {
return this.http.get(this.getDataUrl)
.pipe(
tap(_ => console.log('fetched data')),
catchError(this.handleError('getData', ))
);}
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
console.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};}
and component looks like this
getData(){
this.serviceData.getConfig().subscribe((info:any)=>{
console.log(info);
},(err:any)=>{
console.log(err);
});
}
those who are curious what does the 'tap' do, here is the explanation written on the angular page
The HeroService methods will tap into the flow of observable values
and send a message (via log()) to the message area at the bottom of
the page.
They'll do that with the RxJS tap operator, which looks at the
observable values, does something with those values, and passes them
along. The tap call back doesn't touch the values themselves.
add a comment |
Even i used map with Observables in angular2 to make service calls for get post and my service.ts used to look something like this and it was working absolutely fine(Before). I would only import
import {Observable} from "rxjs";
which was sufficient for angular2
public init() : Observable<UserData> {
return this.http.get(this.baseUrl + "/init", this.options)
.map(SharedService.extractJson)
.catch(SharedService.handleError);
}
and the components.ts would look like this
init() {
this.service.init().subscribe((info) => {
this.metaUser = info;
}, (error) => {
console.log(SharedService.getError(error._body));
});
but recently i tried to use the same syntax and was getting the above error. There are some notable changes from 2/4 to the latest Angular and some of the methods are deprecated and there are some changes in the name as well. So the working code (service.ts) looks something like this(these are the bits and pieces of the working code with the corresponding import statements)
import {HttpClient} from "@angular/common/http";
import {Observable, of} from "rxjs";
import {catchError, map, tap} from 'rxjs/operators';
getConfig(): Observable<any> {
return this.http.get(this.getDataUrl)
.pipe(
tap(_ => console.log('fetched data')),
catchError(this.handleError('getData', ))
);}
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
console.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};}
and component looks like this
getData(){
this.serviceData.getConfig().subscribe((info:any)=>{
console.log(info);
},(err:any)=>{
console.log(err);
});
}
those who are curious what does the 'tap' do, here is the explanation written on the angular page
The HeroService methods will tap into the flow of observable values
and send a message (via log()) to the message area at the bottom of
the page.
They'll do that with the RxJS tap operator, which looks at the
observable values, does something with those values, and passes them
along. The tap call back doesn't touch the values themselves.
add a comment |
Even i used map with Observables in angular2 to make service calls for get post and my service.ts used to look something like this and it was working absolutely fine(Before). I would only import
import {Observable} from "rxjs";
which was sufficient for angular2
public init() : Observable<UserData> {
return this.http.get(this.baseUrl + "/init", this.options)
.map(SharedService.extractJson)
.catch(SharedService.handleError);
}
and the components.ts would look like this
init() {
this.service.init().subscribe((info) => {
this.metaUser = info;
}, (error) => {
console.log(SharedService.getError(error._body));
});
but recently i tried to use the same syntax and was getting the above error. There are some notable changes from 2/4 to the latest Angular and some of the methods are deprecated and there are some changes in the name as well. So the working code (service.ts) looks something like this(these are the bits and pieces of the working code with the corresponding import statements)
import {HttpClient} from "@angular/common/http";
import {Observable, of} from "rxjs";
import {catchError, map, tap} from 'rxjs/operators';
getConfig(): Observable<any> {
return this.http.get(this.getDataUrl)
.pipe(
tap(_ => console.log('fetched data')),
catchError(this.handleError('getData', ))
);}
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
console.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};}
and component looks like this
getData(){
this.serviceData.getConfig().subscribe((info:any)=>{
console.log(info);
},(err:any)=>{
console.log(err);
});
}
those who are curious what does the 'tap' do, here is the explanation written on the angular page
The HeroService methods will tap into the flow of observable values
and send a message (via log()) to the message area at the bottom of
the page.
They'll do that with the RxJS tap operator, which looks at the
observable values, does something with those values, and passes them
along. The tap call back doesn't touch the values themselves.
Even i used map with Observables in angular2 to make service calls for get post and my service.ts used to look something like this and it was working absolutely fine(Before). I would only import
import {Observable} from "rxjs";
which was sufficient for angular2
public init() : Observable<UserData> {
return this.http.get(this.baseUrl + "/init", this.options)
.map(SharedService.extractJson)
.catch(SharedService.handleError);
}
and the components.ts would look like this
init() {
this.service.init().subscribe((info) => {
this.metaUser = info;
}, (error) => {
console.log(SharedService.getError(error._body));
});
but recently i tried to use the same syntax and was getting the above error. There are some notable changes from 2/4 to the latest Angular and some of the methods are deprecated and there are some changes in the name as well. So the working code (service.ts) looks something like this(these are the bits and pieces of the working code with the corresponding import statements)
import {HttpClient} from "@angular/common/http";
import {Observable, of} from "rxjs";
import {catchError, map, tap} from 'rxjs/operators';
getConfig(): Observable<any> {
return this.http.get(this.getDataUrl)
.pipe(
tap(_ => console.log('fetched data')),
catchError(this.handleError('getData', ))
);}
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error); // log to console instead
// TODO: better job of transforming error for user consumption
console.log(`${operation} failed: ${error.message}`);
// Let the app keep running by returning an empty result.
return of(result as T);
};}
and component looks like this
getData(){
this.serviceData.getConfig().subscribe((info:any)=>{
console.log(info);
},(err:any)=>{
console.log(err);
});
}
those who are curious what does the 'tap' do, here is the explanation written on the angular page
The HeroService methods will tap into the flow of observable values
and send a message (via log()) to the message area at the bottom of
the page.
They'll do that with the RxJS tap operator, which looks at the
observable values, does something with those values, and passes them
along. The tap call back doesn't touch the values themselves.
answered Jan 3 at 4:46
heman123heman123
1,38931529
1,38931529
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49242391%2fangular-5-rxjs-map-import-doesnt-work-or-im-missing-something%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown