{"id":529,"hash":"5428e0840d89219007579557f855e8f2ef7a7b5237db6c55d48c6da5c06b9044","pattern":"Angular HTTP GET with TypeScript error http.get(...).map is not a function in [null]","full_message":"I have a problem with HTTP in Angular. \n\nI just want to GET a JSON list and show it in the view. \n\nService class\n\nimport {Injectable} from \"angular2/core\";\nimport {Hall} from \"./hall\";\nimport {Http} from \"angular2/http\";\n@Injectable()\nexport class HallService {\n    public http:Http;\n    public static PATH:string = 'app/backend/'    \n\n    constructor(http:Http) {\n        this.http=http;\n    }\n\n    getHalls() {\n           return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());\n    }\n}\n\nAnd in the HallListComponent I call the getHalls method from the service:\n\nexport class HallListComponent implements OnInit {\n    public halls:Hall[];\n    public _selectedId:number;\n\n    constructor(private _router:Router,\n                private _routeParams:RouteParams,\n                private _service:HallService) {\n        this._selectedId = +_routeParams.get('id');\n    }\n\n    ngOnInit() {\n        this._service.getHalls().subscribe((halls:Hall[])=>{ \n            this.halls=halls;\n        });\n    }\n}\n\nHowever, I got an exception: \n\n  TypeError: this.http.get(...).map is not a function in [null]\n\nhall-center.component\n\nimport {Component} from \"angular2/core\";\nimport {RouterOutlet} from \"angular2/router\";\nimport {HallService} from \"./hall.service\";\nimport {RouteConfig} from \"angular2/router\";\nimport {HallListComponent} from \"./hall-list.component\";\nimport {HallDetailComponent} from \"./hall-detail.component\";\n@Component({\n    template:`\n        <h2>my app</h2>\n        <router-outlet></router-outlet>\n    `,\n    directives: [RouterOutlet],\n    providers: [HallService]\n})\n\n@RouteConfig([\n    {path: '/',         name: 'HallCenter', component:HallListComponent, useAsDefault:true},\n    {path: '/hall-list', name: 'HallList', component:HallListComponent}\n])\n\nexport class HallCenterComponent{}\n\napp.component\n\nimport {Component} from 'angular2/core';\nimport {ROUTER_DIRECTIVES} from \"angular2/router\";\nimport {RouteConfig} from \"angular2/router\";\nimport {HallCenterComponent} from \"./hall/hall-center.component\";\n@Component({\n    selector: 'my-app',\n    template: `\n        <h1>Examenopdracht Factory</h1>\n        <a [routerLink]=\"['HallCenter']\">Hall overview</a>\n        <router-outlet></router-outlet>\n    `,\n    directives: [ROUTER_DIRECTIVES]\n})\n\n@RouteConfig([\n    {path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}\n])\nexport class AppComponent { }\n\ntsconfig.json\n\n{\n  \"compilerOptions\": {\n    \"target\": \"ES5\",\n    \"module\": \"system\",\n    \"moduleResolution\": \"node\",\n    \"sourceMap\": true,\n    \"emitDecoratorMetadata\": true,\n    \"experimentalDecorators\": true,\n    \"removeComments\": false,\n    \"noImplicitAny\": false\n  },\n  \"exclude\": [\n    \"node_modules\"\n  ]\n}","ecosystem":"npm","package_name":"angular","package_version":null,"solution":"I think that you need to import this:\n\nimport 'rxjs/add/operator/map'\n\nOr more generally this if you want to have more methods for observables.\nWARNING: This will import all 50+ operators and add them to your application, thus affecting your bundle size and load times.\n\nimport 'rxjs/Rx';\n\nSee this issue for more details.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/34515173/angular-http-get-with-typescript-error-http-get-map-is-not-a-function-in-n","votes":348,"created_at":"2026-04-19T04:51:17.805401+00:00","updated_at":"2026-04-19T04:51:17.805401+00:00"}