HiveBrain v1.2.0
Get Started
← Back to all entries
debugjavascriptangularCritical

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

Submitted by: @import:stackoverflow-api··
0
Viewed 0 times
angulartypescripterrorwithfunctionnotnullhttpgetmap

Problem

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:`
        my app
        
    `,
    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 {HallCenterCompo

Solution

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.

Code Snippets

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

Context

Stack Overflow Q#34515173, score: 541

Revisions (0)

No revisions yet.