टाइपस्क्रिप्ट त्रुटि http.get (…) के साथ कोणीय HTTP GET [null] में एक फ़ंक्शन नहीं है

Question

मुझे Angular में HTTP की समस्या है।

मैं सिर्फ GETएक JSONसूची चाहता हूं और इसे दृश्य में दिखाता हूं ।

सेवा वर्ग

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

और HallListComponentमैं getHallsसेवा से विधि को बुलाता हूं :

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

हालाँकि, मुझे एक अपवाद मिला:

TypeError: this.http.get (...)। नक्शा एक फ़ंक्शन नहीं है [अशक्त]

हॉल-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"
  ]
}

Comments

क्या http.get वादा वापस नहीं करता है?

— bmm6o

@ bmm6o नई Httpसेवा प्रेक्षण योग्य है

— Brocco

मैं लगभग समान मुद्दे में भाग गया, एंगुलर 2 बीटा -17 से अंतिम रिलीज के लिए एक परियोजना को स्थानांतरित करने की कोशिश कर रहा हूं। मेरे लिए मुद्दा मेरी आईडीई था, हालांकि, वीएस 2015 का उपयोग, अपडेट 3। टाइपस्क्रिप्ट भाषा सेवा विस्तार अभी भी था 1.8.36, जबकि एनजी 2 क्विकस्टार्ट गाइड (जैसा कि मैं यह लिखता हूं) का उपयोग कर रहा है "typescript": "^2.0.2"। टीएस लंग को अपग्रेड करना। एक्सटेंशन और अपडेट के माध्यम से सेवा ने मेरे लिए चाल चली। जबकि यह अद्यतन स्थापित किया जा रहा था मैं इस एसओ उत्तर में आया था , जो उसी निष्कर्ष के साथ समाप्त होता है।

— एरिक लीज

Phpstorm / webstorm के लिए, मेरी परियोजना के पुस्तकालय के साथ टाइपस्क्रिप्ट संस्करण को अपडेट करने से भी समस्या हल हो गई। मैंने इस SO उत्तर के चरणों का पालन किया: stackoverflow.com/a/31608934/1291428

— सेबास

Answer 1

मुझे लगता है कि आपको इसे आयात करने की आवश्यकता है:

import 'rxjs/add/operator/map'

या अधिक आम तौर पर यह अगर आप वेधशालाओं के लिए और अधिक तरीके चाहते हैं। चेतावनी: यह सभी 50+ ऑपरेटरों को आयात करेगा और उन्हें आपके आवेदन में जोड़ देगा, इस प्रकार आपके बंडल आकार और लोड समय को प्रभावित करेगा।

import 'rxjs/Rx';

देखें इस मुद्दे अधिक जानकारी के लिए।

Comments

कौन सी त्रुटियां अभी भी बनी हुई हैं? स्टैकओवरफ़्लो पर आप इस बारे में कुछ विशिष्ट प्रश्न पूछ सकते हैं;; यह प्रश्न शायद आपकी भी मदद कर सकता है: stackoverflow.com/questions/34450131/… ।

— थिएरी टेम्पलियर

कोणीय 2 आरसी 0 के रूप में, अब इसकी आवश्यकता नहीं है।

— ओनुर येल्ड्रिम

@ OnurYıldırım, rc.4 का उपयोग करते हुए, यह आयात अभी भी आवश्यक है, जब तक कि मैं कुछ गलत नहीं कर रहा हूं।

— जोसेफ गेब्रियल

कृपया 'आयात' rxjs / Rx 'का उपयोग न करें?' क्योंकि यह सब कुछ आयात करता है और rxjs बहुत बड़ा हो जाता है। एक-एक करके ऑपरेटरों को आयात करें, जैसा कि आपको उनकी आवश्यकता है।

— 13

Rxjs के साथ कोणीय 2: 5.0.0-beta.12 यहाँ। और मुझे अभी भी करना था import 'rxjs/add/operator/do'... जबकि हमें .map()अब और नहीं करना है। लेकिन इससे मेरे .do()मामले में मदद मिली , यह महसूस करने के लिए कि मुझे विशेष रूप से इसे आयात करने की आवश्यकता है। धन्यवाद! मुझसे एक वोट ऊपर :)

— MrCroft

Answer 2

बस कुछ पृष्ठभूमि ... नवनिर्मित सर्वर संचार देव गाइड (अंत में) इस पर चर्चा / उल्लेख / व्याख्या करता है:

RxJS लाइब्रेरी काफी बड़ी है। आकार तब मायने रखता है जब हम एक उत्पादन एप्लिकेशन का निर्माण करते हैं और इसे मोबाइल उपकरणों पर तैनात करते हैं। हमें केवल उन विशेषताओं को शामिल करना चाहिए जिनकी हमें वास्तव में आवश्यकता है।

तदनुसार, कोणीय मॉड्यूल Observableमें एक छीन डाउन संस्करण को उजागर करता है rxjs/Observable, एक ऐसा संस्करण जिसमें लगभग सभी ऑपरेटरों की कमी होती है, जिसमें हम यहां mapविधि का उपयोग करना चाहते हैं ।

यह हमारे ऊपर है कि हम उन ऑपरेटरों को जोड़ें जिनकी हमें आवश्यकता है। हम प्रत्येक ऑपरेटर को एक-एक करके जोड़ सकते हैं, जब तक कि हमारे पास एक कस्टम ऑब्जर्वेबल कार्यान्वयन हमारी आवश्यकताओं के अनुरूप न हो।

इसलिए @ थिएरी ने पहले ही जवाब दे दिया, हम केवल उन ऑपरेटरों को खींच सकते हैं जिनकी हमें आवश्यकता है:

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

या, यदि हम आलसी हैं तो हम ऑपरेटरों के पूर्ण सेट में खींच सकते हैं। चेतावनी: यह आपके ऐप बंडल में सभी 50+ ऑपरेटरों को जोड़ेगा, और लोड समय को प्रभावित करेगा

import 'rxjs/Rx';

Comments

आयात 'rxjs / Rx'; वाह। और मेरे सारे बाल तुरन्त झड़ जाते हैं। मुझे विश्वास नहीं हो रहा है कि यह Rxjs / Angular2 के लिए पूरी दुनिया में नहीं छपा है। धन्यवाद!!!

— जिमब

लेकिन यह अक्सर लिंट नहीं होगा, डिफ़ॉल्ट रूप से यह एक ब्लैकलिस्टेड आयात है। एक नया कोणीय CLI प्रोजेक्ट बनाएँ, आप देखेंगे। मुझे खुद से सुविधा पसंद है लेकिन NYC में मैं जिन जगहों पर काम करता हूं वहां कन्वेंशन नहीं है।

— टिम कंसोलाज़ियो

Answer 3

से 5.5 rxjs के बाद, आप उपयोग कर सकते हैं pipeable ऑपरेटरों

import { map } from 'rxjs/operators';

क्या गलत है import 'rxjs/add/operator/map';

जब हम इस एप्रोच mapऑपरेटर का उपयोग करते हैं तो उसे observable.prototype इस वस्तु का एक हिस्सा बनाया जाएगा।

यदि बाद में, आप mapऑपरेटर को उस कोड से निकालने का निर्णय लेते हैं जो अवलोकन योग्य स्ट्रीम को संभालता है लेकिन संबंधित आयात विवरण को हटाने में विफल mapरहता है , तो कोड जो लागू करता है वह का एक हिस्सा रहता है Observable.prototype।

जब बंडलर्स अप्रयुक्त कोड ( उर्फ tree shaking ) को खत्म करने की कोशिश करते हैं , तो वे mapऑपरेटर के कोड को ऑब्जर्वेबल में रखने का निर्णय ले सकते हैं, भले ही इसका उपयोग एप्लिकेशन में नहीं किया जा रहा हो।

समाधान -Pipeable operators

Pipeable ऑपरेटरों शुद्ध कार्य हैं और पैच नहीं है नमूदार । आप ईएस 6 आयात सिंटैक्स का उपयोग करके ऑपरेटरों को आयात कर सकते हैं import { map } from "rxjs/operators"और फिर उन्हें एक फ़ंक्शन में लपेट सकते हैं pipe()जो मापदंडों की एक परिवर्तनीय संख्या, यानी चेनेबल ऑपरेटर लेता है।

कुछ इस तरह:

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

Answer 4

कोणीय 5 के साथ RxJS आयात में सुधार हुआ है।

के बजाय

import 'rxjs/add/operator/map';

हम अब कर सकते हैं

import { map } from 'rxjs/operators';

Comments

इस दृष्टिकोण का उपयोग करते हुए, अब आपके निर्माण में इसमें केवल उपयोग किए गए ऑपरेटर (इस मामले में नक्शा) शामिल होंगे, पहले यह आरएक्सजेएस लाइब्रेरी से सभी ऑपरेटरों को शामिल किया गया था। अधिक विस्तार के लिए नीचे दिए गए लिंक की जाँच करें। loiane.com/2017/08/angular-rxjs-imports

— Hiren Shah

Answer 5

का उपयोग करते हुए Observable.subscribeसीधे काम करना चाहिए।

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

Comments

यह एक बहुत ही कुशल दृष्टिकोण नहीं है। उदाहरण के लिए यदि कई ग्राहक हैं तो उन्हें सेवा में केवल एक बार करने के बजाय डेटा पर मानचित्र चलाना होगा। मुझे लगता है कि ओपी के पास सही दृष्टिकोण था, बस इसका उपयोग करने के लिए सही मॉड्यूल लोड नहीं था।

— इवान प्लाइस

Answer 6

5 और इसके बाद के संस्करण के लिए, अद्यतन आयात लाइन इस तरह दिखाई देती है:

import { map } from 'rxjs/operators';

या

import { map } from 'rxjs/operators';

इसके अलावा ये संस्करण पूरी तरह से Pipable Operators का समर्थन करते हैं ताकि आप आसानी से .pipe () और .subscribe () का उपयोग कर सकें।

यदि आप कोणीय संस्करण 2 का उपयोग कर रहे हैं, तो निम्न पंक्ति बिल्कुल ठीक काम करना चाहिए:

import 'rxjs/add/operator/map';

या

import 'rxjs/add/operators/map';

यदि आप अभी भी एक समस्या का सामना कर रहे हैं, तो आपको अवश्य जाना चाहिए:

import 'rxjs/Rx';

मैं आपको इसे सीधे उपयोग करने के लिए पसंद नहीं करूंगा क्योंकि यह लोड समय को बढ़ाता है, क्योंकि इसमें बड़ी संख्या में ऑपरेटर हैं (उपयोगी और उपयोगी) जो उद्योग के मानदंडों के अनुसार अच्छा अभ्यास नहीं है, इसलिए सुनिश्चित करें आप पहले उपर्युक्त आयात लाइनों का उपयोग करने का प्रयास करते हैं, और यदि वह काम नहीं करता है तो आपको rxjs / Rx के लिए जाना चाहिए

Answer 7

मेरे पास इस समस्या का हल है

इस पैकेज को स्थापित करें:

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

फिर इस पुस्तकालय को आयात करें

import 'rxjs/add/operator/map'

अंत में अपने ईओण परियोजना को फिर से शुरू करें

ionic serve -l

Answer 8

कोणीय संस्करण 6 "0.6.8" rxjs संस्करण 6 "^ 6.0.0"

यह समाधान इस प्रकार है:

  "@angular-devkit/core": "0.6.8",
  "rxjs": "^6.0.0"

जैसा कि हम सभी जानते हैं कि हर दिन कोणीय विकसित किया जा रहा है, इसलिए हर दिन बहुत सारे परिवर्तन होते हैं और यह समाधान कोणीय 6 और आरएक्सजे 6 के लिए है
सबसे पहले http यो के साथ काम करना चाहिए इसे आयात करना चाहिए: आखिरकार आपको ऐप में हेटपोडोड्यूल घोषित करना होगा। module.ts

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

और आपको HttpModule को Ngmodule -> आयात में जोड़ना होगा

  imports: [
    HttpModule,
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],

मानचित्र के साथ काम करने के लिए दूसरा आपको पहले पाइप आयात करना चाहिए:

import { pipe } from 'rxjs';

तीसरा आपको मानचित्र फ़ंक्शन आयात की आवश्यकता है:

import { map } from 'rxjs/operators';

आपको इस छूट की तरह पाइप के अंदर मानचित्र का उपयोग करना होगा:

 constructor(public http:Http){  }

    getusersGET(){
        return this.http.get('http://jsonplaceholder.typicode.com/users').pipe(
         map(res => res.json()  )  );
    }

यह पूरी तरह से अच्छी किस्मत काम करता है!

Answer 9

यहाँ आप जिस मानचित्र का उपयोग कर रहे हैं, वह .map()जावास्क्रिप्ट में नहीं है , यह Rxjs मानचित्र फ़ंक्शन है जो काम कर रहा हैObservables कोणीय में ...

तो उस स्थिति में आपको इसे आयात करने की आवश्यकता है यदि आप परिणाम डेटा पर मानचित्र का उपयोग करना चाहते हैं ...

map(project: function(value: T, index: number): R, thisArg: any): Observable<R> अवलोकन योग्य स्रोत द्वारा उत्सर्जित प्रत्येक मान के लिए दिए गए प्रोजेक्ट फ़ंक्शन को लागू करता है, और परिणामी मानों को एक अवलोकन के रूप में उत्सर्जित करता है।

तो बस इसे इस तरह से आयात करें:

import 'rxjs/add/operator/map';

Answer 10

के बाद से Http में सेवा angular2 रिटर्न एक प्रत्यक्ष प्रकार, अपने Angular2 स्थापना निर्देशिका से (मेरे मामले में 'node_modules'), हम आपके में नमूदार के आयात मानचित्र समारोह की जरूरत घटक का उपयोग कर http , सेवा के रूप में:

import 'rxjs/add/operator/map';

Answer 11

कोणीय 6 - केवल 'rxjs / Rx' आयात ने मेरे लिए चाल चली

Answer 12

बस आप फ़ाइल में लाइन जोड़ें,

आयात 'rxjs / Rx';

यह निर्भरता के गुच्छा आयात करेगा। कोणीय 5 में निहित

Answer 13

सच है, RxJs ने अपने मैप ऑपरेटर को एक अलग मॉड्यूल में अलग कर दिया है और अब आपको किसी अन्य ऑपरेटर की तरह इसे एक्सप्लोर करने की आवश्यकता है।

import rxjs/add/operator/map;

और तुम ठीक हो जाओगे

Answer 14

वैश्विक आयात के साथ जाना सुरक्षित है।

आयात 'rxjs / Rx';

Answer 15

import 'rxjs/add/operator/map';

आपकी समस्या का समाधान करेगा

मैंने इसे कोणीय 5.2.0 और rxjs 5.5.2 में परीक्षण किया

Answer 16

ऐसा इसलिए हो रहा है क्योंकि आप rxjs का उपयोग कर रहे हैं और rxjs फ़ंक्शन में स्थिर नहीं हैं, जिसका अर्थ है कि आप उन्हें सीधे कॉल नहीं कर सकते हैं आपको पाइप के अंदर के तरीकों को कॉल करना होगा और rxjs लाइब्रेरी से उस फ़ंक्शन को आयात करना होगा।

लेकिन अगर आप rxjs-कंप्रेशर्स का इस्तेमाल कर रहे हैं तो आपको सिर्फ rxjs-कंपोनेंट ऑपरेटर्स को इंपोर्ट करना होगा

Answer 17

मैंने आदेशों के नीचे कोशिश की और यह ठीक हो गया:

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


import 'rxjs/Rx';

Comments

यह केवल आप के लिए कुछ पैचिंग करके rxjs 6 में शुरू में काम करने के लिए है। यह केवल एक अल्पकालिक फिक्स है और पूर्ण rxjs 6 संक्रमण किया जाना चाहिए।

— हैंका

Answer 18

'rxjs / ऑपरेटर्स' से {map} आयात करें;

यह मेरे लिए कोणीय 8 में काम करता है

Answer 19

साथ ही @ mlc-mlapis ने क्या टिप्पणी की, आप lettable ऑपरेटरों और प्रोटोटाइप पैचिंग विधि का मिश्रण कर रहे हैं। एक या दूसरे का उपयोग करें ।

आपके मामले के लिए यह होना चाहिए

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

@Injectable()
export class SwPeopleService {
    people$ = this.http.get('https://swapi.co/api/people/')
      .map((res:any) => res.results);

    constructor(private http: HttpClient) {} 
}

https://stackblitz.com/edit/angular-http-observables-9nchvz?file=app%2Fsw-people.service.ts