कोणीय अपवाद: Http के लिए कोई प्रदाता नहीं

333

मुझे EXCEPTION: No provider for Http!अपने एंगुलर ऐप में मिल रहा है । मैं क्या गलत कर रहा हूं?

import {Http, Headers} from 'angular2/http';
import {Injectable} from 'angular2/core'


@Component({
    selector: 'greetings-ac-app2',
    providers: [],
    templateUrl: 'app/greetings-ac2.html',
    directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES],
    pipes: []
})
export class GreetingsAcApp2 {
    private str:any;

    constructor(http: Http) {

        this.str = {str:'test'};

        http.post('http://localhost:18937/account/registeruiduser/',
            JSON.stringify(this.str),
            {
                headers: new Headers({
                    'Content-Type': 'application/json'
                })
            });

angular

— डैनियल
स्रोत

3

आपकी याद आ रही है HTTP_PROVIDERS।

— एरिक मार्टिनेज

1

आयात / निर्यात ... कृपया, कोई भी, यह क्या वाक्यविन्यास है?

— vp_arth

5

यह टाइपस्क्रिप्ट सिंटैक्स है

— daniel

10

आयात / निर्यात - यह जावास्क्रिप्ट सिंटैक्स (ES6) है

— एलेक्सपोड्स

3

यह अच्छा होगा यदि उत्तर में से एक को वास्तव में समझाया जाए कि हमें आयात करने की आवश्यकता क्यों हैHttpModule , और यह क्या करता है।

— द्राज़ेन बोल्लोवुक

520

HttpModule आयात करें

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

@NgModule({
    imports: [ BrowserModule, HttpModule ],
    providers: [],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export default class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

आदर्श रूप से, आप इस कोड को दो अलग-अलग फ़ाइलों में विभाजित करते हैं। अधिक जानकारी के लिए पढ़ें:

— फिलिप
स्रोत

2

वर्तमान Angular2 बीटा में फ़ाइल को कहा जाता है app.ts।

— d135-1r43

7

कोणीय-क्ली उत्पन्न परियोजनाओं में, फ़ाइल कहा जाता है main.ts।

— फाइलोक्स

क्या होगा अगर मेरे पास एक NgModule नहीं है? मैं एक angular2 मॉड्यूल के विकास कर रहा हूँ और यह एक NgModule नहीं है लेकिन परीक्षण के लिए मैं जरूरत Http प्रदाता

— IRAs

@ वेबब्रस्टर मैंने अभी जाँच की है। यह अभी भी काम करना चाहिए। क्या आप मुझे सटीक त्रुटि कोड दे सकते हैं?

— फिलिप

2

@PhilipMiglinci ... बहुमूल्य उत्तर के लिए धन्यवाद .. चाहने वालों के लिए कुछ बिंदुओं को जोड़ते हुए कि यह स्पष्टीकरण के लिए कोणीय 2.0 में app.module.ts होगा , यह परियोजना के लिए मुख्य फाइल है जिसमें मॉड्यूल शामिल करना है जो आगे विरासत में मिला होगा। कक्षाएं।

— शान गोला

56

> = कोणीय 4.3

शुरू करने के लिए HttpClientModule

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // if used
    HttpClientModule,
    JsonpModule // if used
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Angular2> = RC.5

HttpModuleमॉड्यूल का आयात जहां आप इसका उपयोग करते हैं (उदाहरण के लिए यहां AppModule:

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

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, // if used
    HttpModule,
    JsonpModule // if used
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

आयात करना पिछले संस्करण में HttpModuleजोड़ने के समान है HTTP_PROVIDERS।

— गुंटर ज़ोचबॉयर
स्रोत

9

14 सितंबर, 2016 कोणीय 2.0.0 रिलीज के साथ, आप अभी भी HttpModule का उपयोग कर रहे हैं। आपका मुख्य app.module.tsकुछ इस तरह दिखेगा:

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

@NgModule({
   bootstrap: [ AppComponent ],
   declarations: [ AppComponent ],
   imports: [
      BrowserModule,
      HttpModule,
      // ...more modules...
   ],
   providers: [
      // ...providers...
   ]
})
export class AppModule {}

फिर आपके app.tsसामने आप इस तरह बूटस्ट्रैप कर सकते हैं:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/main/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

— कालेब
स्रोत

9

उपयोग करने से पहले app.module.ts फ़ाइल में सरणी आयात करने के लिए HttpModule जोड़ें ।

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

@NgModule({
  declarations: [
    AppComponent,
    CarsComponent
  ],
  imports: [
    BrowserModule,
	HttpModule  
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

स्निपेट का विस्तार करें

— सुरेन्द्र परचुरु
स्रोत

9

Rc.5 के बाद से आपको कुछ करना होगा

@NgModule({
    imports: [ BrowserModule],
    providers: [ HTTP_PROVIDERS ],  
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export default class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

— एड्रियन बेर
स्रोत

6

क्योंकि यह केवल टिप्पणी अनुभाग में था मैं एरिक से जवाब दोहराता हूं:

मुझे शामिल करना था HTTP_PROVIDERS

— डैनियल
स्रोत

2

... इसके अलावा, HTTP_PROVIDERS को अस्वीकृत कर दिया गया है। अब इसे HttpModule .. stackoverflow.com/questions/38903607/…

— माइक Gledhill

5

HttpModuleअपने app.module.ts फ़ाइल में आयात करें।

import { HttpModule } from '@angular/http';
import { YourHttpTestService } from '../services/httpTestService';

नीचे जैसे आयात के तहत HttpModule घोषित करना याद रखें:

imports: [
    BrowserModule,
    HttpModule
  ],

— पू अरसन
स्रोत

4

सबसे अच्छा तरीका नीचे के रूप में प्रदाताओं सरणी में Http जोड़कर अपने घटक के डेकोरेटर को बदलना है।

@Component({
    selector: 'greetings-ac-app2',
    providers: [Http],
    templateUrl: 'app/greetings-ac2.html',
    directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES],
    pipes: []
})

— शिवांग गुप्ता
स्रोत

जिसने भी इसे गलत तरीके से चिह्नित किया है, क्या मुझे पता है कि इसका कारण क्या है?

— शिवांग गुप्ता

5

मैं नीचे नहीं गया, लेकिन शायद यह है कि आप Httpप्रत्येक घटक के लिए एक नई वस्तु नहीं चाहते हैं। ऐप के लिए एक एकल होना बेहतर है, जो इसे NgModuleस्तर पर आयात करके पूरा किया जाता है।

— टेड हॉप

3

RC5 के रूप में आपको HttpModule को आयात करने की आवश्यकता है जैसे:

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

उसके बाद आयात सरणी में HttpModule को शामिल करें जैसा कि गुंटर द्वारा ऊपर वर्णित है।

— Mareks
स्रोत

3

बस निम्नलिखित पुस्तकालय शामिल करें:

import { HttpModule } from '@angular/http';
import { YourHttpTestService } from '../services/httpTestService';

और http वर्ग को providersअनुभाग में शामिल करें , निम्नानुसार है:

@Component({
  selector: '...',
  templateUrl: './test.html',
  providers: [YourHttpTestService]

— Enayat
स्रोत

3

यदि आपके परीक्षणों में यह त्रुटि है, तो आपको सभी सेवाओं के लिए नकली सेवा बनानी चाहिए:

उदाहरण के लिए:

import { YourService1 } from '@services/your1.service';
import { YourService2 } from '@services/your2.service';

class FakeYour1Service {
 public getSomeData():any { return null; }
}

class FakeYour2Service {
  public getSomeData():any { return null; }
}

और पहले में:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    providers: [
      Your1Service,
      Your2Service,
      { provide: Your1Service, useClass: FakeYour1Service },
      { provide: Your2Service, useClass: FakeYour2Service }
    ]
  }).compileComponents();  // compile template and css
}));

— प्रयोगकर्ता
स्रोत

3

**

सिंपल सोल्युशन: HttpModule और HttpClientModule को अपने app.module.ts पर आयात करें

**

import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';



@NgModule({
 declarations: [
   AppComponent, videoComponent, tagDirective, 
 ],
 imports: [
  BrowserModule, routing, HttpClientModule, HttpModule

],
providers: [ApiServices],
bootstrap: [AppComponent]
})
export class AppModule { }

— शशवत गुप्ता
स्रोत

यह समाधान काम करता है, लेकिन HttpModule को Angular 5.2 में पदावनत के रूप में चिह्नित किया गया है। मुझे लगता है कि कुछ घटक उन्नत नहीं है, और अभी भी पुराने Http कार्यान्वयन का उपयोग करता है।

— सोबावन

1

आपको बस app.module.ts में निम्नलिखित पुस्तकालयों को शामिल करना है और इसे अपने आयातों में शामिल करना है:

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

@NgModule({
  imports:    [ HttpModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

— फ़िज़ा खान
स्रोत

1

मुझे अपने कोड में इस मुद्दे का सामना करना पड़ा। मैंने केवल इस कोड को अपने app.module.ts में रखा है।

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

@NgModule({
  imports:      [ BrowserModule, HttpModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

— सौरभ
स्रोत

1

कृपया मौजूदा उत्तरों को न दोहराएं। ऐसा करने से समुदाय में मूल्य नहीं जुड़ता है।

— isherwood

1

import { HttpModule } from '@angular/http'; अपने मॉड्यूल.ts फ़ाइल में पैकेज करें और इसे अपने आयातों में जोड़ें।

— Alekya
स्रोत

1

मैं सिर्फ अपने app.module.ts में इन दोनों को जोड़ता हूं:

"import { HttpClientModule }    from '@angular/common/http';

और

import { HttpModule } from '@angular/http';"

अब इसका काम ठीक है .... और अंदर जोड़ना मत भूलना

@NgModule => Imports:[] array

— दिब्य प्रकाश दास
स्रोत