With TypeScript error http.get (...) . map's angle HTTP GET is not a function in [null]

I have an HTTP problem in Angular.

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

Service level

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

In HallListComponent, I invoke 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;
        });
    }
}

But I have one exception:

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

Hall center assembly

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{}

Application 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"
  ]
}

#1 building

I think you need to import the following:

import 'rxjs/add/operator/map'

Or more generally, if you want to have more observable methods. Warning: this will import all more than 50 operators and add them to your application, affecting bundle size and load time.

import 'rxjs/Rx';

For more details, see See this problem .

#2 building

You should be able to use Observable.subscribe directly.

@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()); // <<--
    }
}

#3 building

It's just some background... Newly created Server Communication The development guide (final) discusses / refers to / explains the following:

The RxJS library is large. Size matters when we build production applications and deploy them to mobile devices. We should only include those functions that we actually need.

Therefore, Angular exposes a simplified version of Observable in the rxjs/Observable module, which lacks almost all operators, including the operators we want to use here, such as the map method.

It's up to us to add the required operators. We can add each operator one by one until we have a custom Observable implementation that precisely adjusts to our requirements.

So, as @ Thierry has already answered, we just need to introduce the required operators:

import 'rxjs/add/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';

Or, if we're lazy, we can introduce a whole set of operators. Warning: this will add all more than 50 operators to your app package and affect the load time

import 'rxjs/Rx';

#4 building

Since http service in angular2 returns Observable type, we need to use http service to import the map function of Observable into your component from your angular2 installation directory (in this case, 'node'u modules'), as shown below:

import 'rxjs/add/operator/map';

#5 building

The map you use here is not the. map() in javascript, but the Rxjs map function. Observables uses observables in Angular.

Therefore, in this case, if you want to use map on the result data, you need to import it

Map (Project: function (value: T, index: number): R, thisarg: any): Observable < R > applies the given project function to each value issued by the source Observable, and issues the result value as Observable.

So just import like this:

import 'rxjs/add/operator/map';

Tags: JSON angular Mobile Javascript

Posted on Thu, 12 Mar 2020 08:55:27 -0400 by Scrumpers