Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

309

I have a problem with HTTP in Angular.

I just want to GET a JSON list and show it in the view.

Service class

import {Injectable} from "angular2/core";

import {Hall} from "./hall";

import {Http} from "angular2/http";

@Injectable()

export class HallService {

    public http:Http;

    public static PATH:string = 'app/backend/'    



    constructor(http:Http) {

        this.http=http;

    }



    getHalls() {

           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());

    }

}

And in the HallListComponent I call the getHalls method from the service:

export class HallListComponent implements OnInit {

    public halls:Hall;

    public _selectedId:number;



    constructor(private _router:Router,

                private _routeParams:RouteParams,

                private _service:HallService) {

        this._selectedId = +_routeParams.get('id');

    }



    ngOnInit() {

        this._service.getHalls().subscribe((halls:Hall)=>{ 

            this.halls=halls;

        });

    }

}

However, I got an exception:

TypeError: this.http.get(...).map is not a function in [null]

hall-center.component

import {Component} from "angular2/core";

import {RouterOutlet} from "angular2/router";

import {HallService} from "./hall.service";

import {RouteConfig} from "angular2/router";

import {HallListComponent} from "./hall-list.component";

import {HallDetailComponent} from "./hall-detail.component";

@Component({

    template:`

        <h2>my app</h2>

        <router-outlet></router-outlet>

    `,

    directives: [RouterOutlet],

    providers: [HallService]

})



@RouteConfig([

    {path: '/',         name: 'HallCenter', component:HallListComponent, useAsDefault:true},

    {path: '/hall-list', name: 'HallList', component:HallListComponent}

])



export class HallCenterComponent{}

app.component

import {Component} from 'angular2/core';

import {ROUTER_DIRECTIVES} from "angular2/router";

import {RouteConfig} from "angular2/router";

import {HallCenterComponent} from "./hall/hall-center.component";

@Component({

    selector: 'my-app',

    template: `

        <h1>Examenopdracht Factory</h1>

        <a [routerLink]="['HallCenter']">Hall overview</a>

        <router-outlet></router-outlet>

    `,

    directives: [ROUTER_DIRECTIVES]

})



@RouteConfig([

    {path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}

])

export class AppComponent { }

tsconfig.json

{

  "compilerOptions": {

    "target": "ES5",

    "module": "system",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false

  },

  "exclude": [

    "node_modules"

  ]

}

edited Dec 17 '17 at 8:26

Lazar Ljubenović

10.1k42953

asked Dec 29 '15 at 16:35

Claudiu

1,93521228

Doesn't http.get return a promise?

– bmm6o
Dec 29 '15 at 16:38

1

@bmm6o The new Http service returns an observable

– Brocco
Dec 29 '15 at 16:39

1

I ran into a nearly identical issue, trying to migrate a project from Angular2 beta-17 to final release. The issue for me was my IDE though, using VS 2015, Update 3. The TypeScript language service extension was still at 1.8.36, whereas as the ng2 quickstart guide (as I write this) is using "typescript": "^2.0.2". Upgrading the TS lang. service via Extensions and Updates did the trick for me. While that update was being installed I came across this SO answer, which ends with the same conclusion.

– Eric Lease
Sep 21 '16 at 7:03

For phpstorm/webstorm, updating the typescript version with the library of my project also solved the problem. I followed the steps of this SO answer: stackoverflow.com/a/31608934/1291428

– Sebas
Dec 11 '16 at 15:20

add a comment |

309

I have a problem with HTTP in Angular.

I just want to GET a JSON list and show it in the view.

Service class

import {Injectable} from "angular2/core";

import {Hall} from "./hall";

import {Http} from "angular2/http";

@Injectable()

export class HallService {

    public http:Http;

    public static PATH:string = 'app/backend/'    



    constructor(http:Http) {

        this.http=http;

    }



    getHalls() {

           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());

    }

}

And in the HallListComponent I call the getHalls method from the service:

export class HallListComponent implements OnInit {

    public halls:Hall;

    public _selectedId:number;



    constructor(private _router:Router,

                private _routeParams:RouteParams,

                private _service:HallService) {

        this._selectedId = +_routeParams.get('id');

    }



    ngOnInit() {

        this._service.getHalls().subscribe((halls:Hall)=>{ 

            this.halls=halls;

        });

    }

}

However, I got an exception:

TypeError: this.http.get(...).map is not a function in [null]

hall-center.component

import {Component} from "angular2/core";

import {RouterOutlet} from "angular2/router";

import {HallService} from "./hall.service";

import {RouteConfig} from "angular2/router";

import {HallListComponent} from "./hall-list.component";

import {HallDetailComponent} from "./hall-detail.component";

@Component({

    template:`

        <h2>my app</h2>

        <router-outlet></router-outlet>

    `,

    directives: [RouterOutlet],

    providers: [HallService]

})



@RouteConfig([

    {path: '/',         name: 'HallCenter', component:HallListComponent, useAsDefault:true},

    {path: '/hall-list', name: 'HallList', component:HallListComponent}

])



export class HallCenterComponent{}

app.component

import {Component} from 'angular2/core';

import {ROUTER_DIRECTIVES} from "angular2/router";

import {RouteConfig} from "angular2/router";

import {HallCenterComponent} from "./hall/hall-center.component";

@Component({

    selector: 'my-app',

    template: `

        <h1>Examenopdracht Factory</h1>

        <a [routerLink]="['HallCenter']">Hall overview</a>

        <router-outlet></router-outlet>

    `,

    directives: [ROUTER_DIRECTIVES]

})



@RouteConfig([

    {path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}

])

export class AppComponent { }

tsconfig.json

{

  "compilerOptions": {

    "target": "ES5",

    "module": "system",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false

  },

  "exclude": [

    "node_modules"

  ]

}

edited Dec 17 '17 at 8:26

Lazar Ljubenović

10.1k42953

asked Dec 29 '15 at 16:35

Claudiu

1,93521228

Doesn't http.get return a promise?

– bmm6o
Dec 29 '15 at 16:38

1

@bmm6o The new Http service returns an observable

– Brocco
Dec 29 '15 at 16:39

1

I ran into a nearly identical issue, trying to migrate a project from Angular2 beta-17 to final release. The issue for me was my IDE though, using VS 2015, Update 3. The TypeScript language service extension was still at 1.8.36, whereas as the ng2 quickstart guide (as I write this) is using "typescript": "^2.0.2". Upgrading the TS lang. service via Extensions and Updates did the trick for me. While that update was being installed I came across this SO answer, which ends with the same conclusion.

– Eric Lease
Sep 21 '16 at 7:03

For phpstorm/webstorm, updating the typescript version with the library of my project also solved the problem. I followed the steps of this SO answer: stackoverflow.com/a/31608934/1291428

– Sebas
Dec 11 '16 at 15:20

add a comment |

309

I have a problem with HTTP in Angular.

I just want to GET a JSON list and show it in the view.

Service class

import {Injectable} from "angular2/core";

import {Hall} from "./hall";

import {Http} from "angular2/http";

@Injectable()

export class HallService {

    public http:Http;

    public static PATH:string = 'app/backend/'    



    constructor(http:Http) {

        this.http=http;

    }



    getHalls() {

           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());

    }

}

And in the HallListComponent I call the getHalls method from the service:

export class HallListComponent implements OnInit {

    public halls:Hall;

    public _selectedId:number;



    constructor(private _router:Router,

                private _routeParams:RouteParams,

                private _service:HallService) {

        this._selectedId = +_routeParams.get('id');

    }



    ngOnInit() {

        this._service.getHalls().subscribe((halls:Hall)=>{ 

            this.halls=halls;

        });

    }

}

However, I got an exception:

TypeError: this.http.get(...).map is not a function in [null]

hall-center.component

import {Component} from "angular2/core";

import {RouterOutlet} from "angular2/router";

import {HallService} from "./hall.service";

import {RouteConfig} from "angular2/router";

import {HallListComponent} from "./hall-list.component";

import {HallDetailComponent} from "./hall-detail.component";

@Component({

    template:`

        <h2>my app</h2>

        <router-outlet></router-outlet>

    `,

    directives: [RouterOutlet],

    providers: [HallService]

})



@RouteConfig([

    {path: '/',         name: 'HallCenter', component:HallListComponent, useAsDefault:true},

    {path: '/hall-list', name: 'HallList', component:HallListComponent}

])



export class HallCenterComponent{}

app.component

import {Component} from 'angular2/core';

import {ROUTER_DIRECTIVES} from "angular2/router";

import {RouteConfig} from "angular2/router";

import {HallCenterComponent} from "./hall/hall-center.component";

@Component({

    selector: 'my-app',

    template: `

        <h1>Examenopdracht Factory</h1>

        <a [routerLink]="['HallCenter']">Hall overview</a>

        <router-outlet></router-outlet>

    `,

    directives: [ROUTER_DIRECTIVES]

})



@RouteConfig([

    {path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}

])

export class AppComponent { }

tsconfig.json

{

  "compilerOptions": {

    "target": "ES5",

    "module": "system",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false

  },

  "exclude": [

    "node_modules"

  ]

}

edited Dec 17 '17 at 8:26

Lazar Ljubenović

10.1k42953

asked Dec 29 '15 at 16:35

Claudiu

1,93521228

I have a problem with HTTP in Angular.

I just want to GET a JSON list and show it in the view.

Service class

import {Injectable} from "angular2/core";

import {Hall} from "./hall";

import {Http} from "angular2/http";

@Injectable()

export class HallService {

    public http:Http;

    public static PATH:string = 'app/backend/'    



    constructor(http:Http) {

        this.http=http;

    }



    getHalls() {

           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());

    }

}

And in the HallListComponent I call the getHalls method from the service:

export class HallListComponent implements OnInit {

    public halls:Hall;

    public _selectedId:number;



    constructor(private _router:Router,

                private _routeParams:RouteParams,

                private _service:HallService) {

        this._selectedId = +_routeParams.get('id');

    }



    ngOnInit() {

        this._service.getHalls().subscribe((halls:Hall)=>{ 

            this.halls=halls;

        });

    }

}

However, I got an exception:

TypeError: this.http.get(...).map is not a function in [null]

hall-center.component

import {Component} from "angular2/core";

import {RouterOutlet} from "angular2/router";

import {HallService} from "./hall.service";

import {RouteConfig} from "angular2/router";

import {HallListComponent} from "./hall-list.component";

import {HallDetailComponent} from "./hall-detail.component";

@Component({

    template:`

        <h2>my app</h2>

        <router-outlet></router-outlet>

    `,

    directives: [RouterOutlet],

    providers: [HallService]

})



@RouteConfig([

    {path: '/',         name: 'HallCenter', component:HallListComponent, useAsDefault:true},

    {path: '/hall-list', name: 'HallList', component:HallListComponent}

])



export class HallCenterComponent{}

app.component

import {Component} from 'angular2/core';

import {ROUTER_DIRECTIVES} from "angular2/router";

import {RouteConfig} from "angular2/router";

import {HallCenterComponent} from "./hall/hall-center.component";

@Component({

    selector: 'my-app',

    template: `

        <h1>Examenopdracht Factory</h1>

        <a [routerLink]="['HallCenter']">Hall overview</a>

        <router-outlet></router-outlet>

    `,

    directives: [ROUTER_DIRECTIVES]

})



@RouteConfig([

    {path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}

])

export class AppComponent { }

tsconfig.json

{

  "compilerOptions": {

    "target": "ES5",

    "module": "system",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false

  },

  "exclude": [

    "node_modules"

  ]

}

angular rxjs

edited Dec 17 '17 at 8:26

Lazar Ljubenović

10.1k42953

asked Dec 29 '15 at 16:35

Claudiu

1,93521228

edited Dec 17 '17 at 8:26

Lazar Ljubenović

10.1k42953

asked Dec 29 '15 at 16:35

Claudiu

1,93521228

edited Dec 17 '17 at 8:26

Lazar Ljubenović

10.1k42953

edited Dec 17 '17 at 8:26

Lazar Ljubenović

10.1k42953

edited Dec 17 '17 at 8:26

Lazar Ljubenović

10.1k42953

asked Dec 29 '15 at 16:35

Claudiu

1,93521228

asked Dec 29 '15 at 16:35

Claudiu

1,93521228

asked Dec 29 '15 at 16:35

Claudiu

1,93521228

Doesn't http.get return a promise?

– bmm6o
Dec 29 '15 at 16:38

1

@bmm6o The new Http service returns an observable

– Brocco
Dec 29 '15 at 16:39

1

I ran into a nearly identical issue, trying to migrate a project from Angular2 beta-17 to final release. The issue for me was my IDE though, using VS 2015, Update 3. The TypeScript language service extension was still at 1.8.36, whereas as the ng2 quickstart guide (as I write this) is using "typescript": "^2.0.2". Upgrading the TS lang. service via Extensions and Updates did the trick for me. While that update was being installed I came across this SO answer, which ends with the same conclusion.

– Eric Lease
Sep 21 '16 at 7:03

For phpstorm/webstorm, updating the typescript version with the library of my project also solved the problem. I followed the steps of this SO answer: stackoverflow.com/a/31608934/1291428

– Sebas
Dec 11 '16 at 15:20

add a comment |

Doesn't http.get return a promise?

– bmm6o
Dec 29 '15 at 16:38

1

@bmm6o The new Http service returns an observable

– Brocco
Dec 29 '15 at 16:39

1

I ran into a nearly identical issue, trying to migrate a project from Angular2 beta-17 to final release. The issue for me was my IDE though, using VS 2015, Update 3. The TypeScript language service extension was still at 1.8.36, whereas as the ng2 quickstart guide (as I write this) is using "typescript": "^2.0.2". Upgrading the TS lang. service via Extensions and Updates did the trick for me. While that update was being installed I came across this SO answer, which ends with the same conclusion.

– Eric Lease
Sep 21 '16 at 7:03

For phpstorm/webstorm, updating the typescript version with the library of my project also solved the problem. I followed the steps of this SO answer: stackoverflow.com/a/31608934/1291428

– Sebas
Dec 11 '16 at 15:20

Doesn't http.get return a promise?

– bmm6o
Dec 29 '15 at 16:38

@bmm6o The new Http service returns an observable

– Brocco
Dec 29 '15 at 16:39

I ran into a nearly identical issue, trying to migrate a project from Angular2 beta-17 to final release. The issue for me was my IDE though, using VS 2015, Update 3. The TypeScript language service extension was still at 1.8.36, whereas as the ng2 quickstart guide (as I write this) is using "typescript": "^2.0.2". Upgrading the TS lang. service via Extensions and Updates did the trick for me. While that update was being installed I came across this SO answer, which ends with the same conclusion.

– Eric Lease
Sep 21 '16 at 7:03

For phpstorm/webstorm, updating the typescript version with the library of my project also solved the problem. I followed the steps of this SO answer: stackoverflow.com/a/31608934/1291428

– Sebas
Dec 11 '16 at 15:20

add a comment |

17 Answers
17

active

oldest

votes

518

I think that you need to import this:

import 'rxjs/add/operator/map'

Or more generally this if you want to have more methods for observables.
WARNING: This will import all 50+ operators and add them to your application, thus affecting your bundle size and load times.

import 'rxjs/Rx';

See this issue for more details.

edited Aug 1 '17 at 1:32

Ben Lesh

96.8k46238228

answered Dec 29 '15 at 16:43

Thierry Templier

148k29321301

1

Which errors still remain? You can ask some specific questions regarding this on stackoverflow ;-) This question could perhaps help you as well: stackoverflow.com/questions/34450131/….

– Thierry Templier
Jan 10 '16 at 8:55

1

As of Angular 2 RC 0, this is no longer required.

– Onur Yıldırım
Jul 30 '16 at 12:17

3

@OnurYıldırım, using rc.4, this import is still required, unless I'm doing something wrong.

– Joseph Gabriel
Aug 3 '16 at 2:37

15

Please don't use 'import 'rxjs/Rx';' because it imports everything and rxjs tends to be pretty big. Import operators one by one as you need them.

– Drag0
Sep 22 '16 at 13:56

1

Angular 2 with rxjs: 5.0.0-beta.12 here. And I still had to import 'rxjs/add/operator/do'... While we don't have to do this for .map() anymore. But this helped my .do() case, to realize I specifically need to import it. Thank you! One up vote from me :)

– MrCroft
Sep 25 '16 at 17:56

|
show 4 more comments

Just some background... The newly minted Server Communication dev guide (finally) discusses/mentions/explains this:

The RxJS library is quite large. Size matters when we build a production application and deploy it to mobile devices. We should include only those features that we actually need.

Accordingly, Angular exposes a stripped down version of Observable in the rxjs/Observable module, a version that lacks almost all operators including the ones we'd like to use here such as the map method.

It's up to us to add the operators we need. We could add each operator, one-by-one, until we had a custom Observable implementation tuned precisely to our requirements.

So as @Thierry already answered, we can just pull in the operators we need:

import 'rxjs/add/operator/map';

import 'rxjs/operator/delay';

import 'rxjs/operator/mergeMap';

import 'rxjs/operator/switchMap';

Or, if we're lazy we can pull in the full set of operators. WARNING: this will add all 50+ operators to your app bundle, and will effect load times

import 'rxjs/Rx';

edited Aug 1 '17 at 1:34

Ben Lesh

96.8k46238228

answered Jan 27 '16 at 17:19

Mark Rajcok

297k92438462

2

import 'rxjs/Rx'; wow. and all my hair pulling instantly goes away. i can't believe this isn't printed all over the world for Rxjs/Angular2. thanks!!!

– JimB
Mar 23 '16 at 16:59

But it frequently won't lint, by default it's a blacklisted import. Create a new angular CLI project, you'll see. I love the convenience myself but the convention in the places I work in NYC is not to do it.

– Tim Consolazio
Apr 20 '18 at 13:54

add a comment |

With Angular 5 the RxJS import is improved.

Instead of

import 'rxjs/add/operator/map';

We can now

import { map } from 'rxjs/operators';

answered Nov 3 '17 at 12:40

Claudiu

1,93521228

Is there any advantage in this approach? Looks really interesting.

– Machado
Mar 21 '18 at 20:48

Using this approach,now in your build it will only include used operators ( map in this case), earlier it was including all the operators from rxjs library. check below link for more detail. loiane.com/2017/08/angular-rxjs-imports

– Hiren Shah
Jun 15 '18 at 5:44

add a comment |

From rxjs 5.5 onwards, you can use the pipeable operators

import { map } from 'rxjs/operators';

What is wrong with the import 'rxjs/add/operator/map';

When we use this approach map operator will be patched to observable.prototype and becomes a part of this object.

If later on, you decide to remove map operator from the code that handles the observable stream but fail to remove the corresponding import statement, the code that implements map remains a part of the Observable.prototype.

When the bundlers tries to eliminate the unused code (a.k.a. tree shaking), they may decide to keep the code of the map operator in the Observable even though it’s not being used in the application.

Solution - Pipeable operators

Pipeable operators are pure functions and do not patch the Observable. You can import operators using the ES6 import syntax import { map } from "rxjs/operators" and then wrap them into a function pipe() that takes a variable number of parameters, i.e. chainable operators.

Something like this:

getHalls() {

    return this.http.get(HallService.PATH + 'hall.json')

    .pipe(

        map((res: Response) => res.json())

    );

}

edited Jul 7 '18 at 9:03

Wolverine

1,4941216

answered Jul 3 '18 at 13:01

Sachila Ranawaka

20.1k42651

Superb below It worked for me . Thanks you so much. .pipe( map((res: Response) => res.json()) );

– Anand_5050
Mar 10 at 15:17

add a comment |

Using Observable.subscribe directly should work.

@Injectable()

export class HallService {

    public http:Http;

    public static PATH:string = 'app/backend/'    



    constructor(http:Http) {

        this.http=http;

    }



    getHalls() {

    // ########### No map

           return this.http.get(HallService.PATH + 'hall.json');

    }

}





export class HallListComponent implements OnInit {

    public halls:Hall;

    / *** /

    ngOnInit() {

        this._service.getHalls()

           .subscribe(halls => this.halls = halls.json()); // <<--

    }

}

answered Dec 29 '15 at 18:36

TheKojuEffect

10.3k1357101

5

This isn't a very efficient approach. For instance if there are multiple subscribers they will each have to run map on the data, rather than just doing it once in the service. I think OP had the right approach, just didn't have the right module loaded to use it.

– Evan Plaice
Jan 25 '16 at 18:17

add a comment |

Angular version 6 "0.6.8"
rxjs version 6 "^6.0.0"

this solution is for :

  "@angular-devkit/core": "0.6.8",

  "rxjs": "^6.0.0"

as we all know angular is being developed every day so there are lots of changes every day and this solution is for angular 6 and rxjs 6

first to work with http yo should import it from :
after all you have to declare the HttpModule in app.module.ts

import { Http } from '@angular/http';

and you have to add HttpModule to Ngmodule -> imports

  imports: [

    HttpModule,

    BrowserModule,

    FormsModule,

    RouterModule.forRoot(appRoutes)

  ],

second to work with map you should first import pipe :

import { pipe } from 'rxjs';

third you need the map function import from :

import { map } from 'rxjs/operators';

you have to use map inside pipe like this exemple :

 constructor(public http:Http){  }



    getusersGET(){

        return this.http.get('http://jsonplaceholder.typicode.com/users').pipe(

         map(res => res.json()  )  );

    }

that works perfectly good luck !

edited Sep 26 '18 at 18:47

answered Sep 23 '18 at 12:37

nadir hamidou

4022415

add a comment |

For Angular versions 5 and above, the updated importing line looks like :

import { map } from 'rxjs/operators';

import { map } from 'rxjs/operators';

Also these versions totally supports Pipable Operators so you can easily use .pipe() and .subscribe().

If you are using Angular version 2, then the following line should work absolutely fine :

import 'rxjs/add/operator/map';

import 'rxjs/add/operators/map';

If you still encounter a problem then you must go with :

import 'rxjs/Rx';

I won't prefer you to use it directly bcoz it boosts the Load time, as it has a large number of operators in it (useful and un-useful ones) which is not a good practice according to the industry norms, so make sure you try using the above mentioned importing lines first, and if that not works then you should go for rxjs/Rx

answered May 30 '18 at 4:51

Jitendra Ahuja

231318

add a comment |

I have a solution of this problem

Install this package:

npm install rxjs@6 rxjs-compat@6 --save

then import this library

import 'rxjs/add/operator/map'

finally restart your ionic project then

ionic serve -l

edited Jun 24 '18 at 2:40

Stephen Rauch

30.2k153759

answered Jun 24 '18 at 2:22

divyajeet singh

231

add a comment |

The map you using here, is not the .map() in javascript, it's Rxjs map function which working on Observables in Angular...

So in that case you need to import it if you'd like to use map on the result data...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R> Applies a given project function to each value emitted
by the source Observable, and emits the resulting values as an
Observable.

So simply import it like this:

import 'rxjs/add/operator/map';

edited Dec 13 '17 at 8:38

answered Oct 13 '17 at 0:24

Alireza

52.4k14178124

add a comment |

Since Http service in angular2 returns an Observable type,
From your Angular2 installation directory('node_modules' in my case),We need to import map function of the Observable in your component using http service,as:

import 'rxjs/add/operator/map';

answered Feb 18 '17 at 10:58

Amardeep Kohli

31625

add a comment |

Global import is safe to go with.

import 'rxjs/Rx';

answered Dec 23 '17 at 21:20

rut shah

113

add a comment |

Angular 6 - only import 'rxjs/Rx' did the trick for me

answered Jul 15 '18 at 13:15

Shimi Avizmil

162

add a comment |

Just add the line in you file,

import 'rxjs/Rx';

It will import bunch of dependencies.Tested in angular 5

answered Jul 23 '18 at 12:54

Mandeep Singh

14018

this works. Thanks.

– noooooooob
Jan 11 at 6:07

add a comment |

True, RxJs has separated its map operator in a separate module and now you need to explicity import it like any other operator.

import rxjs/add/operator/map;

and you will be fine.

answered Oct 28 '17 at 12:11

Piyush P

160110

add a comment |

import 'rxjs/add/operator/map';

will resolve your problem

I tested it in angular 5.2.0 and rxjs 5.5.2

edited Feb 28 '18 at 14:29

piet.t

10.1k73246

answered Feb 28 '18 at 12:46

Mayank Bhardwaj

add a comment |

this is happening because you are using the rxjs and in rxjs function are not static which means you can't call them directly you have to call the methods inside the pipe and import that function from the rxjs library

But if you are using rxjs-compat then you just need to import the rxjs-compat operators

answered Jul 23 '18 at 15:27

Gurvinder Guraya

4148

add a comment |

I tried below commands and it gets fixed:

npm install rxjs@6 rxjs-compat@6 --save





import 'rxjs/Rx';

answered Dec 29 '18 at 18:30

Phan Hero

167

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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f34515173%2fangular-http-get-with-typescript-error-http-get-map-is-not-a-function-in-n%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

17 Answers
17

active

oldest

votes

17 Answers
17

active

oldest

votes

518

I think that you need to import this:

import 'rxjs/add/operator/map'

import 'rxjs/Rx';

See this issue for more details.

edited Aug 1 '17 at 1:32

Ben Lesh

96.8k46238228

answered Dec 29 '15 at 16:43

Thierry Templier

148k29321301

1

Which errors still remain? You can ask some specific questions regarding this on stackoverflow ;-) This question could perhaps help you as well: stackoverflow.com/questions/34450131/….

– Thierry Templier
Jan 10 '16 at 8:55

1

As of Angular 2 RC 0, this is no longer required.

– Onur Yıldırım
Jul 30 '16 at 12:17

3

@OnurYıldırım, using rc.4, this import is still required, unless I'm doing something wrong.

– Joseph Gabriel
Aug 3 '16 at 2:37

15

Please don't use 'import 'rxjs/Rx';' because it imports everything and rxjs tends to be pretty big. Import operators one by one as you need them.

– Drag0
Sep 22 '16 at 13:56

1

Angular 2 with rxjs: 5.0.0-beta.12 here. And I still had to import 'rxjs/add/operator/do'... While we don't have to do this for .map() anymore. But this helped my .do() case, to realize I specifically need to import it. Thank you! One up vote from me :)

– MrCroft
Sep 25 '16 at 17:56

|
show 4 more comments

518

I think that you need to import this:

import 'rxjs/add/operator/map'

import 'rxjs/Rx';

See this issue for more details.

edited Aug 1 '17 at 1:32

Ben Lesh

96.8k46238228

answered Dec 29 '15 at 16:43

Thierry Templier

148k29321301

1

Which errors still remain? You can ask some specific questions regarding this on stackoverflow ;-) This question could perhaps help you as well: stackoverflow.com/questions/34450131/….

– Thierry Templier
Jan 10 '16 at 8:55

1

As of Angular 2 RC 0, this is no longer required.

– Onur Yıldırım
Jul 30 '16 at 12:17

3

@OnurYıldırım, using rc.4, this import is still required, unless I'm doing something wrong.

– Joseph Gabriel
Aug 3 '16 at 2:37

15

Please don't use 'import 'rxjs/Rx';' because it imports everything and rxjs tends to be pretty big. Import operators one by one as you need them.

– Drag0
Sep 22 '16 at 13:56

1

Angular 2 with rxjs: 5.0.0-beta.12 here. And I still had to import 'rxjs/add/operator/do'... While we don't have to do this for .map() anymore. But this helped my .do() case, to realize I specifically need to import it. Thank you! One up vote from me :)

– MrCroft
Sep 25 '16 at 17:56

|
show 4 more comments

518

I think that you need to import this:

import 'rxjs/add/operator/map'

import 'rxjs/Rx';

See this issue for more details.

edited Aug 1 '17 at 1:32

Ben Lesh

96.8k46238228

answered Dec 29 '15 at 16:43

Thierry Templier

148k29321301

I think that you need to import this:

import 'rxjs/add/operator/map'

import 'rxjs/Rx';

See this issue for more details.

edited Aug 1 '17 at 1:32

Ben Lesh

96.8k46238228

answered Dec 29 '15 at 16:43

Thierry Templier

148k29321301

edited Aug 1 '17 at 1:32

Ben Lesh

96.8k46238228

edited Aug 1 '17 at 1:32

Ben Lesh

96.8k46238228

edited Aug 1 '17 at 1:32

Ben Lesh

96.8k46238228

answered Dec 29 '15 at 16:43

Thierry Templier

148k29321301

answered Dec 29 '15 at 16:43

Thierry Templier

148k29321301

answered Dec 29 '15 at 16:43

Thierry Templier

148k29321301

1

Which errors still remain? You can ask some specific questions regarding this on stackoverflow ;-) This question could perhaps help you as well: stackoverflow.com/questions/34450131/….

– Thierry Templier
Jan 10 '16 at 8:55

1

As of Angular 2 RC 0, this is no longer required.

– Onur Yıldırım
Jul 30 '16 at 12:17

3

@OnurYıldırım, using rc.4, this import is still required, unless I'm doing something wrong.

– Joseph Gabriel
Aug 3 '16 at 2:37

15

Please don't use 'import 'rxjs/Rx';' because it imports everything and rxjs tends to be pretty big. Import operators one by one as you need them.

– Drag0
Sep 22 '16 at 13:56

1

Angular 2 with rxjs: 5.0.0-beta.12 here. And I still had to import 'rxjs/add/operator/do'... While we don't have to do this for .map() anymore. But this helped my .do() case, to realize I specifically need to import it. Thank you! One up vote from me :)

– MrCroft
Sep 25 '16 at 17:56

|
show 4 more comments

1

Which errors still remain? You can ask some specific questions regarding this on stackoverflow ;-) This question could perhaps help you as well: stackoverflow.com/questions/34450131/….

– Thierry Templier
Jan 10 '16 at 8:55

1

As of Angular 2 RC 0, this is no longer required.

– Onur Yıldırım
Jul 30 '16 at 12:17

3

@OnurYıldırım, using rc.4, this import is still required, unless I'm doing something wrong.

– Joseph Gabriel
Aug 3 '16 at 2:37

15

Please don't use 'import 'rxjs/Rx';' because it imports everything and rxjs tends to be pretty big. Import operators one by one as you need them.

– Drag0
Sep 22 '16 at 13:56

1

Angular 2 with rxjs: 5.0.0-beta.12 here. And I still had to import 'rxjs/add/operator/do'... While we don't have to do this for .map() anymore. But this helped my .do() case, to realize I specifically need to import it. Thank you! One up vote from me :)

– MrCroft
Sep 25 '16 at 17:56

Which errors still remain? You can ask some specific questions regarding this on stackoverflow ;-) This question could perhaps help you as well: stackoverflow.com/questions/34450131/….

– Thierry Templier
Jan 10 '16 at 8:55

As of Angular 2 RC 0, this is no longer required.

– Onur Yıldırım
Jul 30 '16 at 12:17

@OnurYıldırım, using rc.4, this import is still required, unless I'm doing something wrong.

– Joseph Gabriel
Aug 3 '16 at 2:37

Please don't use 'import 'rxjs/Rx';' because it imports everything and rxjs tends to be pretty big. Import operators one by one as you need them.

– Drag0
Sep 22 '16 at 13:56

Angular 2 with rxjs: 5.0.0-beta.12 here. And I still had to import 'rxjs/add/operator/do'... While we don't have to do this for .map() anymore. But this helped my .do() case, to realize I specifically need to import it. Thank you! One up vote from me :)

– MrCroft
Sep 25 '16 at 17:56

|
show 4 more comments

Just some background... The newly minted Server Communication dev guide (finally) discusses/mentions/explains this:

The RxJS library is quite large. Size matters when we build a production application and deploy it to mobile devices. We should include only those features that we actually need.

Accordingly, Angular exposes a stripped down version of Observable in the rxjs/Observable module, a version that lacks almost all operators including the ones we'd like to use here such as the map method.

It's up to us to add the operators we need. We could add each operator, one-by-one, until we had a custom Observable implementation tuned precisely to our requirements.

So as @Thierry already answered, we can just pull in the operators we need:

import 'rxjs/add/operator/map';

import 'rxjs/operator/delay';

import 'rxjs/operator/mergeMap';

import 'rxjs/operator/switchMap';

Or, if we're lazy we can pull in the full set of operators. WARNING: this will add all 50+ operators to your app bundle, and will effect load times

import 'rxjs/Rx';

edited Aug 1 '17 at 1:34

Ben Lesh

96.8k46238228

answered Jan 27 '16 at 17:19

Mark Rajcok

297k92438462

2

import 'rxjs/Rx'; wow. and all my hair pulling instantly goes away. i can't believe this isn't printed all over the world for Rxjs/Angular2. thanks!!!

– JimB
Mar 23 '16 at 16:59

But it frequently won't lint, by default it's a blacklisted import. Create a new angular CLI project, you'll see. I love the convenience myself but the convention in the places I work in NYC is not to do it.

– Tim Consolazio
Apr 20 '18 at 13:54

add a comment |

Just some background... The newly minted Server Communication dev guide (finally) discusses/mentions/explains this:

The RxJS library is quite large. Size matters when we build a production application and deploy it to mobile devices. We should include only those features that we actually need.

Accordingly, Angular exposes a stripped down version of Observable in the rxjs/Observable module, a version that lacks almost all operators including the ones we'd like to use here such as the map method.

It's up to us to add the operators we need. We could add each operator, one-by-one, until we had a custom Observable implementation tuned precisely to our requirements.

So as @Thierry already answered, we can just pull in the operators we need:

import 'rxjs/add/operator/map';

import 'rxjs/operator/delay';

import 'rxjs/operator/mergeMap';

import 'rxjs/operator/switchMap';

Or, if we're lazy we can pull in the full set of operators. WARNING: this will add all 50+ operators to your app bundle, and will effect load times

import 'rxjs/Rx';

edited Aug 1 '17 at 1:34

Ben Lesh

96.8k46238228

answered Jan 27 '16 at 17:19

Mark Rajcok

297k92438462

2

import 'rxjs/Rx'; wow. and all my hair pulling instantly goes away. i can't believe this isn't printed all over the world for Rxjs/Angular2. thanks!!!

– JimB
Mar 23 '16 at 16:59

But it frequently won't lint, by default it's a blacklisted import. Create a new angular CLI project, you'll see. I love the convenience myself but the convention in the places I work in NYC is not to do it.

– Tim Consolazio
Apr 20 '18 at 13:54

add a comment |

Just some background... The newly minted Server Communication dev guide (finally) discusses/mentions/explains this:

The RxJS library is quite large. Size matters when we build a production application and deploy it to mobile devices. We should include only those features that we actually need.

Accordingly, Angular exposes a stripped down version of Observable in the rxjs/Observable module, a version that lacks almost all operators including the ones we'd like to use here such as the map method.

It's up to us to add the operators we need. We could add each operator, one-by-one, until we had a custom Observable implementation tuned precisely to our requirements.

So as @Thierry already answered, we can just pull in the operators we need:

import 'rxjs/add/operator/map';

import 'rxjs/operator/delay';

import 'rxjs/operator/mergeMap';

import 'rxjs/operator/switchMap';

Or, if we're lazy we can pull in the full set of operators. WARNING: this will add all 50+ operators to your app bundle, and will effect load times

import 'rxjs/Rx';

edited Aug 1 '17 at 1:34

Ben Lesh

96.8k46238228

answered Jan 27 '16 at 17:19

Mark Rajcok

297k92438462

Just some background... The newly minted Server Communication dev guide (finally) discusses/mentions/explains this:

The RxJS library is quite large. Size matters when we build a production application and deploy it to mobile devices. We should include only those features that we actually need.

Accordingly, Angular exposes a stripped down version of Observable in the rxjs/Observable module, a version that lacks almost all operators including the ones we'd like to use here such as the map method.

It's up to us to add the operators we need. We could add each operator, one-by-one, until we had a custom Observable implementation tuned precisely to our requirements.

So as @Thierry already answered, we can just pull in the operators we need:

import 'rxjs/add/operator/map';

import 'rxjs/operator/delay';

import 'rxjs/operator/mergeMap';

import 'rxjs/operator/switchMap';

Or, if we're lazy we can pull in the full set of operators. WARNING: this will add all 50+ operators to your app bundle, and will effect load times

import 'rxjs/Rx';

edited Aug 1 '17 at 1:34

Ben Lesh

96.8k46238228

answered Jan 27 '16 at 17:19

Mark Rajcok

297k92438462

edited Aug 1 '17 at 1:34

Ben Lesh

96.8k46238228

edited Aug 1 '17 at 1:34

Ben Lesh

96.8k46238228

edited Aug 1 '17 at 1:34

Ben Lesh

96.8k46238228

answered Jan 27 '16 at 17:19

Mark Rajcok

297k92438462

answered Jan 27 '16 at 17:19

Mark Rajcok

297k92438462

answered Jan 27 '16 at 17:19

Mark Rajcok

297k92438462

2

import 'rxjs/Rx'; wow. and all my hair pulling instantly goes away. i can't believe this isn't printed all over the world for Rxjs/Angular2. thanks!!!

– JimB
Mar 23 '16 at 16:59

But it frequently won't lint, by default it's a blacklisted import. Create a new angular CLI project, you'll see. I love the convenience myself but the convention in the places I work in NYC is not to do it.

– Tim Consolazio
Apr 20 '18 at 13:54

add a comment |

2

import 'rxjs/Rx'; wow. and all my hair pulling instantly goes away. i can't believe this isn't printed all over the world for Rxjs/Angular2. thanks!!!

– JimB
Mar 23 '16 at 16:59

But it frequently won't lint, by default it's a blacklisted import. Create a new angular CLI project, you'll see. I love the convenience myself but the convention in the places I work in NYC is not to do it.

– Tim Consolazio
Apr 20 '18 at 13:54

import 'rxjs/Rx'; wow. and all my hair pulling instantly goes away. i can't believe this isn't printed all over the world for Rxjs/Angular2. thanks!!!

– JimB
Mar 23 '16 at 16:59

But it frequently won't lint, by default it's a blacklisted import. Create a new angular CLI project, you'll see. I love the convenience myself but the convention in the places I work in NYC is not to do it.

– Tim Consolazio
Apr 20 '18 at 13:54

add a comment |

With Angular 5 the RxJS import is improved.

Instead of

import 'rxjs/add/operator/map';

We can now

import { map } from 'rxjs/operators';

answered Nov 3 '17 at 12:40

Claudiu

1,93521228

Is there any advantage in this approach? Looks really interesting.

– Machado
Mar 21 '18 at 20:48

Using this approach,now in your build it will only include used operators ( map in this case), earlier it was including all the operators from rxjs library. check below link for more detail. loiane.com/2017/08/angular-rxjs-imports

– Hiren Shah
Jun 15 '18 at 5:44

add a comment |

With Angular 5 the RxJS import is improved.

Instead of

import 'rxjs/add/operator/map';

We can now

import { map } from 'rxjs/operators';

answered Nov 3 '17 at 12:40

Claudiu

1,93521228

Is there any advantage in this approach? Looks really interesting.

– Machado
Mar 21 '18 at 20:48

Using this approach,now in your build it will only include used operators ( map in this case), earlier it was including all the operators from rxjs library. check below link for more detail. loiane.com/2017/08/angular-rxjs-imports

– Hiren Shah
Jun 15 '18 at 5:44

add a comment |

With Angular 5 the RxJS import is improved.

Instead of

import 'rxjs/add/operator/map';

We can now

import { map } from 'rxjs/operators';

answered Nov 3 '17 at 12:40

Claudiu

1,93521228

With Angular 5 the RxJS import is improved.

Instead of

import 'rxjs/add/operator/map';

We can now

import { map } from 'rxjs/operators';

answered Nov 3 '17 at 12:40

Claudiu

1,93521228

answered Nov 3 '17 at 12:40

Claudiu

1,93521228

answered Nov 3 '17 at 12:40

Claudiu

1,93521228

answered Nov 3 '17 at 12:40

Claudiu

1,93521228

Is there any advantage in this approach? Looks really interesting.

– Machado
Mar 21 '18 at 20:48

Using this approach,now in your build it will only include used operators ( map in this case), earlier it was including all the operators from rxjs library. check below link for more detail. loiane.com/2017/08/angular-rxjs-imports

– Hiren Shah
Jun 15 '18 at 5:44

add a comment |

Is there any advantage in this approach? Looks really interesting.

– Machado
Mar 21 '18 at 20:48

Using this approach,now in your build it will only include used operators ( map in this case), earlier it was including all the operators from rxjs library. check below link for more detail. loiane.com/2017/08/angular-rxjs-imports

– Hiren Shah
Jun 15 '18 at 5:44

Is there any advantage in this approach? Looks really interesting.

– Machado
Mar 21 '18 at 20:48

Using this approach,now in your build it will only include used operators ( map in this case), earlier it was including all the operators from rxjs library. check below link for more detail. loiane.com/2017/08/angular-rxjs-imports

– Hiren Shah
Jun 15 '18 at 5:44

add a comment |

From rxjs 5.5 onwards, you can use the pipeable operators

import { map } from 'rxjs/operators';

What is wrong with the import 'rxjs/add/operator/map';

When we use this approach map operator will be patched to observable.prototype and becomes a part of this object.

Solution - Pipeable operators

Something like this:

getHalls() {

    return this.http.get(HallService.PATH + 'hall.json')

    .pipe(

        map((res: Response) => res.json())

    );

}

edited Jul 7 '18 at 9:03

Wolverine

1,4941216

answered Jul 3 '18 at 13:01

Sachila Ranawaka

20.1k42651

Superb below It worked for me . Thanks you so much. .pipe( map((res: Response) => res.json()) );

– Anand_5050
Mar 10 at 15:17

add a comment |

From rxjs 5.5 onwards, you can use the pipeable operators

import { map } from 'rxjs/operators';

What is wrong with the import 'rxjs/add/operator/map';

When we use this approach map operator will be patched to observable.prototype and becomes a part of this object.

Solution - Pipeable operators

Something like this:

getHalls() {

    return this.http.get(HallService.PATH + 'hall.json')

    .pipe(

        map((res: Response) => res.json())

    );

}

edited Jul 7 '18 at 9:03

Wolverine

1,4941216

answered Jul 3 '18 at 13:01

Sachila Ranawaka

20.1k42651

Superb below It worked for me . Thanks you so much. .pipe( map((res: Response) => res.json()) );

– Anand_5050
Mar 10 at 15:17

add a comment |

From rxjs 5.5 onwards, you can use the pipeable operators

import { map } from 'rxjs/operators';

What is wrong with the import 'rxjs/add/operator/map';

When we use this approach map operator will be patched to observable.prototype and becomes a part of this object.

Solution - Pipeable operators

Something like this:

getHalls() {

    return this.http.get(HallService.PATH + 'hall.json')

    .pipe(

        map((res: Response) => res.json())

    );

}

edited Jul 7 '18 at 9:03

Wolverine

1,4941216

answered Jul 3 '18 at 13:01

Sachila Ranawaka

20.1k42651

From rxjs 5.5 onwards, you can use the pipeable operators

import { map } from 'rxjs/operators';

What is wrong with the import 'rxjs/add/operator/map';

When we use this approach map operator will be patched to observable.prototype and becomes a part of this object.

Solution - Pipeable operators

Something like this:

getHalls() {

    return this.http.get(HallService.PATH + 'hall.json')

    .pipe(

        map((res: Response) => res.json())

    );

}

edited Jul 7 '18 at 9:03

Wolverine

1,4941216

answered Jul 3 '18 at 13:01

Sachila Ranawaka

20.1k42651

edited Jul 7 '18 at 9:03

Wolverine

1,4941216

edited Jul 7 '18 at 9:03

Wolverine

1,4941216

edited Jul 7 '18 at 9:03

Wolverine

1,4941216

answered Jul 3 '18 at 13:01

Sachila Ranawaka

20.1k42651

answered Jul 3 '18 at 13:01

Sachila Ranawaka

20.1k42651

answered Jul 3 '18 at 13:01

Sachila Ranawaka

20.1k42651

Superb below It worked for me . Thanks you so much. .pipe( map((res: Response) => res.json()) );

– Anand_5050
Mar 10 at 15:17

add a comment |

Superb below It worked for me . Thanks you so much. .pipe( map((res: Response) => res.json()) );

– Anand_5050
Mar 10 at 15:17

Superb below It worked for me . Thanks you so much. .pipe( map((res: Response) => res.json()) );

– Anand_5050
Mar 10 at 15:17

add a comment |

Using Observable.subscribe directly should work.

@Injectable()

export class HallService {

    public http:Http;

    public static PATH:string = 'app/backend/'    



    constructor(http:Http) {

        this.http=http;

    }



    getHalls() {

    // ########### No map

           return this.http.get(HallService.PATH + 'hall.json');

    }

}





export class HallListComponent implements OnInit {

    public halls:Hall;

    / *** /

    ngOnInit() {

        this._service.getHalls()

           .subscribe(halls => this.halls = halls.json()); // <<--

    }

}

answered Dec 29 '15 at 18:36

TheKojuEffect

10.3k1357101

5

This isn't a very efficient approach. For instance if there are multiple subscribers they will each have to run map on the data, rather than just doing it once in the service. I think OP had the right approach, just didn't have the right module loaded to use it.

– Evan Plaice
Jan 25 '16 at 18:17

add a comment |

Using Observable.subscribe directly should work.

@Injectable()

export class HallService {

    public http:Http;

    public static PATH:string = 'app/backend/'    



    constructor(http:Http) {

        this.http=http;

    }



    getHalls() {

    // ########### No map

           return this.http.get(HallService.PATH + 'hall.json');

    }

}





export class HallListComponent implements OnInit {

    public halls:Hall;

    / *** /

    ngOnInit() {

        this._service.getHalls()

           .subscribe(halls => this.halls = halls.json()); // <<--

    }

}

answered Dec 29 '15 at 18:36

TheKojuEffect

10.3k1357101

5

This isn't a very efficient approach. For instance if there are multiple subscribers they will each have to run map on the data, rather than just doing it once in the service. I think OP had the right approach, just didn't have the right module loaded to use it.

– Evan Plaice
Jan 25 '16 at 18:17

add a comment |

Using Observable.subscribe directly should work.

@Injectable()

export class HallService {

    public http:Http;

    public static PATH:string = 'app/backend/'    



    constructor(http:Http) {

        this.http=http;

    }



    getHalls() {

    // ########### No map

           return this.http.get(HallService.PATH + 'hall.json');

    }

}





export class HallListComponent implements OnInit {

    public halls:Hall;

    / *** /

    ngOnInit() {

        this._service.getHalls()

           .subscribe(halls => this.halls = halls.json()); // <<--

    }

}

answered Dec 29 '15 at 18:36

TheKojuEffect

10.3k1357101

Using Observable.subscribe directly should work.

@Injectable()

export class HallService {

    public http:Http;

    public static PATH:string = 'app/backend/'    



    constructor(http:Http) {

        this.http=http;

    }



    getHalls() {

    // ########### No map

           return this.http.get(HallService.PATH + 'hall.json');

    }

}





export class HallListComponent implements OnInit {

    public halls:Hall;

    / *** /

    ngOnInit() {

        this._service.getHalls()

           .subscribe(halls => this.halls = halls.json()); // <<--

    }

}

answered Dec 29 '15 at 18:36

TheKojuEffect

10.3k1357101

answered Dec 29 '15 at 18:36

TheKojuEffect

10.3k1357101

answered Dec 29 '15 at 18:36

TheKojuEffect

10.3k1357101

answered Dec 29 '15 at 18:36

TheKojuEffect

10.3k1357101

5

This isn't a very efficient approach. For instance if there are multiple subscribers they will each have to run map on the data, rather than just doing it once in the service. I think OP had the right approach, just didn't have the right module loaded to use it.

– Evan Plaice
Jan 25 '16 at 18:17

add a comment |

5

This isn't a very efficient approach. For instance if there are multiple subscribers they will each have to run map on the data, rather than just doing it once in the service. I think OP had the right approach, just didn't have the right module loaded to use it.

– Evan Plaice
Jan 25 '16 at 18:17

This isn't a very efficient approach. For instance if there are multiple subscribers they will each have to run map on the data, rather than just doing it once in the service. I think OP had the right approach, just didn't have the right module loaded to use it.

– Evan Plaice
Jan 25 '16 at 18:17

add a comment |

Angular version 6 "0.6.8"
rxjs version 6 "^6.0.0"

this solution is for :

  "@angular-devkit/core": "0.6.8",

  "rxjs": "^6.0.0"

import { Http } from '@angular/http';

and you have to add HttpModule to Ngmodule -> imports

  imports: [

    HttpModule,

    BrowserModule,

    FormsModule,

    RouterModule.forRoot(appRoutes)

  ],

second to work with map you should first import pipe :

import { pipe } from 'rxjs';

third you need the map function import from :

import { map } from 'rxjs/operators';

you have to use map inside pipe like this exemple :

 constructor(public http:Http){  }



    getusersGET(){

        return this.http.get('http://jsonplaceholder.typicode.com/users').pipe(

         map(res => res.json()  )  );

    }

that works perfectly good luck !

edited Sep 26 '18 at 18:47

answered Sep 23 '18 at 12:37

nadir hamidou

4022415

add a comment |

Angular version 6 "0.6.8"
rxjs version 6 "^6.0.0"

this solution is for :

  "@angular-devkit/core": "0.6.8",

  "rxjs": "^6.0.0"

import { Http } from '@angular/http';

and you have to add HttpModule to Ngmodule -> imports

  imports: [

    HttpModule,

    BrowserModule,

    FormsModule,

    RouterModule.forRoot(appRoutes)

  ],

second to work with map you should first import pipe :

import { pipe } from 'rxjs';

third you need the map function import from :

import { map } from 'rxjs/operators';

you have to use map inside pipe like this exemple :

 constructor(public http:Http){  }



    getusersGET(){

        return this.http.get('http://jsonplaceholder.typicode.com/users').pipe(

         map(res => res.json()  )  );

    }

that works perfectly good luck !

edited Sep 26 '18 at 18:47

answered Sep 23 '18 at 12:37

nadir hamidou

4022415

add a comment |

Angular version 6 "0.6.8"
rxjs version 6 "^6.0.0"

this solution is for :

  "@angular-devkit/core": "0.6.8",

  "rxjs": "^6.0.0"

import { Http } from '@angular/http';

and you have to add HttpModule to Ngmodule -> imports

  imports: [

    HttpModule,

    BrowserModule,

    FormsModule,

    RouterModule.forRoot(appRoutes)

  ],

second to work with map you should first import pipe :

import { pipe } from 'rxjs';

third you need the map function import from :

import { map } from 'rxjs/operators';

you have to use map inside pipe like this exemple :

 constructor(public http:Http){  }



    getusersGET(){

        return this.http.get('http://jsonplaceholder.typicode.com/users').pipe(

         map(res => res.json()  )  );

    }

that works perfectly good luck !

edited Sep 26 '18 at 18:47

answered Sep 23 '18 at 12:37

nadir hamidou

4022415

Angular version 6 "0.6.8"
rxjs version 6 "^6.0.0"

this solution is for :

  "@angular-devkit/core": "0.6.8",

  "rxjs": "^6.0.0"

import { Http } from '@angular/http';

and you have to add HttpModule to Ngmodule -> imports

  imports: [

    HttpModule,

    BrowserModule,

    FormsModule,

    RouterModule.forRoot(appRoutes)

  ],

second to work with map you should first import pipe :

import { pipe } from 'rxjs';

third you need the map function import from :

import { map } from 'rxjs/operators';

you have to use map inside pipe like this exemple :

 constructor(public http:Http){  }



    getusersGET(){

        return this.http.get('http://jsonplaceholder.typicode.com/users').pipe(

         map(res => res.json()  )  );

    }

that works perfectly good luck !

edited Sep 26 '18 at 18:47

answered Sep 23 '18 at 12:37

nadir hamidou

4022415

edited Sep 26 '18 at 18:47

answered Sep 23 '18 at 12:37

nadir hamidou

4022415

answered Sep 23 '18 at 12:37

nadir hamidou

4022415

answered Sep 23 '18 at 12:37

nadir hamidou

4022415

add a comment |

For Angular versions 5 and above, the updated importing line looks like :

import { map } from 'rxjs/operators';

import { map } from 'rxjs/operators';

Also these versions totally supports Pipable Operators so you can easily use .pipe() and .subscribe().

If you are using Angular version 2, then the following line should work absolutely fine :

import 'rxjs/add/operator/map';

import 'rxjs/add/operators/map';

If you still encounter a problem then you must go with :

import 'rxjs/Rx';

answered May 30 '18 at 4:51

Jitendra Ahuja

231318

add a comment |

For Angular versions 5 and above, the updated importing line looks like :

import { map } from 'rxjs/operators';

import { map } from 'rxjs/operators';

Also these versions totally supports Pipable Operators so you can easily use .pipe() and .subscribe().

If you are using Angular version 2, then the following line should work absolutely fine :

import 'rxjs/add/operator/map';

import 'rxjs/add/operators/map';

If you still encounter a problem then you must go with :

import 'rxjs/Rx';

answered May 30 '18 at 4:51

Jitendra Ahuja

231318

add a comment |

For Angular versions 5 and above, the updated importing line looks like :

import { map } from 'rxjs/operators';

import { map } from 'rxjs/operators';

Also these versions totally supports Pipable Operators so you can easily use .pipe() and .subscribe().

If you are using Angular version 2, then the following line should work absolutely fine :

import 'rxjs/add/operator/map';

import 'rxjs/add/operators/map';

If you still encounter a problem then you must go with :

import 'rxjs/Rx';

answered May 30 '18 at 4:51

Jitendra Ahuja

231318

For Angular versions 5 and above, the updated importing line looks like :

import { map } from 'rxjs/operators';

import { map } from 'rxjs/operators';

Also these versions totally supports Pipable Operators so you can easily use .pipe() and .subscribe().

If you are using Angular version 2, then the following line should work absolutely fine :

import 'rxjs/add/operator/map';

import 'rxjs/add/operators/map';

If you still encounter a problem then you must go with :

import 'rxjs/Rx';

answered May 30 '18 at 4:51

Jitendra Ahuja

231318

answered May 30 '18 at 4:51

Jitendra Ahuja

231318

answered May 30 '18 at 4:51

Jitendra Ahuja

231318

answered May 30 '18 at 4:51

Jitendra Ahuja

231318

add a comment |

I have a solution of this problem

Install this package:

npm install rxjs@6 rxjs-compat@6 --save

then import this library

import 'rxjs/add/operator/map'

finally restart your ionic project then

ionic serve -l

edited Jun 24 '18 at 2:40

Stephen Rauch

30.2k153759

answered Jun 24 '18 at 2:22

divyajeet singh

231

add a comment |

I have a solution of this problem

Install this package:

npm install rxjs@6 rxjs-compat@6 --save

then import this library

import 'rxjs/add/operator/map'

finally restart your ionic project then

ionic serve -l

edited Jun 24 '18 at 2:40

Stephen Rauch

30.2k153759

answered Jun 24 '18 at 2:22

divyajeet singh

231

add a comment |

I have a solution of this problem

Install this package:

npm install rxjs@6 rxjs-compat@6 --save

then import this library

import 'rxjs/add/operator/map'

finally restart your ionic project then

ionic serve -l

edited Jun 24 '18 at 2:40

Stephen Rauch

30.2k153759

answered Jun 24 '18 at 2:22

divyajeet singh

231

I have a solution of this problem

Install this package:

npm install rxjs@6 rxjs-compat@6 --save

then import this library

import 'rxjs/add/operator/map'

finally restart your ionic project then

ionic serve -l

edited Jun 24 '18 at 2:40

Stephen Rauch

30.2k153759

answered Jun 24 '18 at 2:22

divyajeet singh

231

edited Jun 24 '18 at 2:40

Stephen Rauch

30.2k153759

edited Jun 24 '18 at 2:40

Stephen Rauch

30.2k153759

edited Jun 24 '18 at 2:40

Stephen Rauch

30.2k153759

answered Jun 24 '18 at 2:22

divyajeet singh

231

answered Jun 24 '18 at 2:22

divyajeet singh

231

answered Jun 24 '18 at 2:22

divyajeet singh

231

add a comment |

The map you using here, is not the .map() in javascript, it's Rxjs map function which working on Observables in Angular...

So in that case you need to import it if you'd like to use map on the result data...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R> Applies a given project function to each value emitted
by the source Observable, and emits the resulting values as an
Observable.

So simply import it like this:

import 'rxjs/add/operator/map';

edited Dec 13 '17 at 8:38

answered Oct 13 '17 at 0:24

Alireza

52.4k14178124

add a comment |

The map you using here, is not the .map() in javascript, it's Rxjs map function which working on Observables in Angular...

So in that case you need to import it if you'd like to use map on the result data...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R> Applies a given project function to each value emitted
by the source Observable, and emits the resulting values as an
Observable.

So simply import it like this:

import 'rxjs/add/operator/map';

edited Dec 13 '17 at 8:38

answered Oct 13 '17 at 0:24

Alireza

52.4k14178124

add a comment |

The map you using here, is not the .map() in javascript, it's Rxjs map function which working on Observables in Angular...

So in that case you need to import it if you'd like to use map on the result data...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R> Applies a given project function to each value emitted
by the source Observable, and emits the resulting values as an
Observable.

So simply import it like this:

import 'rxjs/add/operator/map';

edited Dec 13 '17 at 8:38

answered Oct 13 '17 at 0:24

Alireza

52.4k14178124

The map you using here, is not the .map() in javascript, it's Rxjs map function which working on Observables in Angular...

So in that case you need to import it if you'd like to use map on the result data...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R> Applies a given project function to each value emitted
by the source Observable, and emits the resulting values as an
Observable.

So simply import it like this:

import 'rxjs/add/operator/map';

edited Dec 13 '17 at 8:38

answered Oct 13 '17 at 0:24

Alireza

52.4k14178124

edited Dec 13 '17 at 8:38

answered Oct 13 '17 at 0:24

Alireza

52.4k14178124

answered Oct 13 '17 at 0:24

Alireza

52.4k14178124

answered Oct 13 '17 at 0:24

Alireza

52.4k14178124

add a comment |

import 'rxjs/add/operator/map';

answered Feb 18 '17 at 10:58

Amardeep Kohli

31625

add a comment |

import 'rxjs/add/operator/map';

answered Feb 18 '17 at 10:58

Amardeep Kohli

31625

add a comment |

import 'rxjs/add/operator/map';

answered Feb 18 '17 at 10:58

Amardeep Kohli

31625

import 'rxjs/add/operator/map';

answered Feb 18 '17 at 10:58

Amardeep Kohli

31625

answered Feb 18 '17 at 10:58

Amardeep Kohli

31625

answered Feb 18 '17 at 10:58

Amardeep Kohli

31625

answered Feb 18 '17 at 10:58

Amardeep Kohli

31625

add a comment |

Global import is safe to go with.

import 'rxjs/Rx';

answered Dec 23 '17 at 21:20

rut shah

113

add a comment |

Global import is safe to go with.

import 'rxjs/Rx';

answered Dec 23 '17 at 21:20

rut shah

113

add a comment |

Global import is safe to go with.

import 'rxjs/Rx';

answered Dec 23 '17 at 21:20

rut shah

113

Global import is safe to go with.

import 'rxjs/Rx';

answered Dec 23 '17 at 21:20

rut shah

113

answered Dec 23 '17 at 21:20

rut shah

113

answered Dec 23 '17 at 21:20

rut shah

113

answered Dec 23 '17 at 21:20

rut shah

113

add a comment |

Angular 6 - only import 'rxjs/Rx' did the trick for me

answered Jul 15 '18 at 13:15

Shimi Avizmil

162

add a comment |

Angular 6 - only import 'rxjs/Rx' did the trick for me

answered Jul 15 '18 at 13:15

Shimi Avizmil

162

add a comment |

Angular 6 - only import 'rxjs/Rx' did the trick for me

answered Jul 15 '18 at 13:15

Shimi Avizmil

162

Angular 6 - only import 'rxjs/Rx' did the trick for me

answered Jul 15 '18 at 13:15

Shimi Avizmil

162

answered Jul 15 '18 at 13:15

Shimi Avizmil

162

answered Jul 15 '18 at 13:15

Shimi Avizmil

162

answered Jul 15 '18 at 13:15

Shimi Avizmil

162

add a comment |

Just add the line in you file,

import 'rxjs/Rx';

It will import bunch of dependencies.Tested in angular 5

answered Jul 23 '18 at 12:54

Mandeep Singh

14018

this works. Thanks.

– noooooooob
Jan 11 at 6:07

add a comment |

Just add the line in you file,

import 'rxjs/Rx';

It will import bunch of dependencies.Tested in angular 5

answered Jul 23 '18 at 12:54

Mandeep Singh

14018

this works. Thanks.

– noooooooob
Jan 11 at 6:07

add a comment |

Just add the line in you file,

import 'rxjs/Rx';

It will import bunch of dependencies.Tested in angular 5

answered Jul 23 '18 at 12:54

Mandeep Singh

14018

Just add the line in you file,

import 'rxjs/Rx';

It will import bunch of dependencies.Tested in angular 5

answered Jul 23 '18 at 12:54

Mandeep Singh

14018

answered Jul 23 '18 at 12:54

Mandeep Singh

14018

answered Jul 23 '18 at 12:54

Mandeep Singh

14018

answered Jul 23 '18 at 12:54

Mandeep Singh

14018

this works. Thanks.

– noooooooob
Jan 11 at 6:07

add a comment |

this works. Thanks.

– noooooooob
Jan 11 at 6:07

this works. Thanks.

– noooooooob
Jan 11 at 6:07

add a comment |

True, RxJs has separated its map operator in a separate module and now you need to explicity import it like any other operator.

import rxjs/add/operator/map;

and you will be fine.

answered Oct 28 '17 at 12:11

Piyush P

160110

add a comment |

True, RxJs has separated its map operator in a separate module and now you need to explicity import it like any other operator.

import rxjs/add/operator/map;

and you will be fine.

answered Oct 28 '17 at 12:11

Piyush P

160110

add a comment |

True, RxJs has separated its map operator in a separate module and now you need to explicity import it like any other operator.

import rxjs/add/operator/map;

and you will be fine.

answered Oct 28 '17 at 12:11

Piyush P

160110

True, RxJs has separated its map operator in a separate module and now you need to explicity import it like any other operator.

import rxjs/add/operator/map;

and you will be fine.

answered Oct 28 '17 at 12:11

Piyush P

160110

answered Oct 28 '17 at 12:11

Piyush P

160110

answered Oct 28 '17 at 12:11

Piyush P

160110

answered Oct 28 '17 at 12:11

Piyush P

160110

add a comment |

import 'rxjs/add/operator/map';

will resolve your problem

I tested it in angular 5.2.0 and rxjs 5.5.2

edited Feb 28 '18 at 14:29

piet.t

10.1k73246

answered Feb 28 '18 at 12:46

Mayank Bhardwaj

add a comment |

import 'rxjs/add/operator/map';

will resolve your problem

I tested it in angular 5.2.0 and rxjs 5.5.2

edited Feb 28 '18 at 14:29

piet.t

10.1k73246

answered Feb 28 '18 at 12:46

Mayank Bhardwaj

add a comment |

import 'rxjs/add/operator/map';

will resolve your problem

I tested it in angular 5.2.0 and rxjs 5.5.2

edited Feb 28 '18 at 14:29

piet.t

10.1k73246

answered Feb 28 '18 at 12:46

Mayank Bhardwaj

import 'rxjs/add/operator/map';

will resolve your problem

I tested it in angular 5.2.0 and rxjs 5.5.2

edited Feb 28 '18 at 14:29

piet.t

10.1k73246

answered Feb 28 '18 at 12:46

Mayank Bhardwaj

edited Feb 28 '18 at 14:29

piet.t

10.1k73246

edited Feb 28 '18 at 14:29

piet.t

10.1k73246

edited Feb 28 '18 at 14:29

piet.t

10.1k73246

answered Feb 28 '18 at 12:46

Mayank Bhardwaj

answered Feb 28 '18 at 12:46

Mayank Bhardwaj

answered Feb 28 '18 at 12:46

Mayank Bhardwaj

add a comment |

But if you are using rxjs-compat then you just need to import the rxjs-compat operators

answered Jul 23 '18 at 15:27

Gurvinder Guraya

4148

add a comment |

But if you are using rxjs-compat then you just need to import the rxjs-compat operators

answered Jul 23 '18 at 15:27

Gurvinder Guraya

4148

add a comment |

But if you are using rxjs-compat then you just need to import the rxjs-compat operators

answered Jul 23 '18 at 15:27

Gurvinder Guraya

4148

But if you are using rxjs-compat then you just need to import the rxjs-compat operators

answered Jul 23 '18 at 15:27

Gurvinder Guraya

4148

answered Jul 23 '18 at 15:27

Gurvinder Guraya

4148

answered Jul 23 '18 at 15:27

Gurvinder Guraya

4148

answered Jul 23 '18 at 15:27

Gurvinder Guraya

4148

add a comment |

I tried below commands and it gets fixed:

npm install rxjs@6 rxjs-compat@6 --save





import 'rxjs/Rx';

answered Dec 29 '18 at 18:30

Phan Hero

167

add a comment |

I tried below commands and it gets fixed:

npm install rxjs@6 rxjs-compat@6 --save





import 'rxjs/Rx';

answered Dec 29 '18 at 18:30

Phan Hero

167

add a comment |

I tried below commands and it gets fixed:

npm install rxjs@6 rxjs-compat@6 --save





import 'rxjs/Rx';

answered Dec 29 '18 at 18:30

Phan Hero

167

I tried below commands and it gets fixed:

npm install rxjs@6 rxjs-compat@6 --save





import 'rxjs/Rx';

answered Dec 29 '18 at 18:30

Phan Hero

167

answered Dec 29 '18 at 18:30

Phan Hero

167

answered Dec 29 '18 at 18:30

Phan Hero

167

answered Dec 29 '18 at 18:30

Phan Hero

167

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu