কৌণিক উত্সাহ: এইচটিটিপি-র জন্য কোনও সরবরাহকারী নেই


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

3
আপনি অনুপস্থিত HTTP_PROVIDERS
এরিক মার্টিনেজ

1
আমদানি / রফতানি ... দয়া করে, কেউ, এটা কি সিনট্যাক্স?
ভিপি_আর্থ

5
এটি টাইপস্ক্রিপ্ট সিনট্যাক্স
ড্যানিয়েল

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
filoxo

আমার যদি এনজিএমডিউল না থাকে তবে কী হবে? আমি একটি কৌণিক 2 মডিউল বিকাশ করছি এবং এটিতে কোনও এনজিওমডুল নেই তবে পরীক্ষাগুলির জন্য আমার
এইচটিপিপি

@ ওয়েবুস্টার আমি সবেমাত্র যাচাই করেছিলাম। এটি এখনও কাজ করা উচিত। আপনি আমাকে সঠিক ত্রুটি কোডটি দিতে পারেন?
ফিলিপ

2
@ ফিলিপমিগ্লিনিসি ... মূল্যবান উত্তরের জন্য ধন্যবাদ .. সন্ধানকারীদের জন্য কয়েকটি পয়েন্ট যুক্ত করে যে ফাইলটি কৌনিক 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 { }

কৌণিক 2> = আরসি .৫

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 প্রকাশের সাথে, আপনি এখনও এইচটিপিএমডুল ব্যবহার করছেন od আপনার প্রধানটি 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

আপনি এটি ব্যবহার করার আগে অ্যাপ্লিকেশন.মডিউল.টস ফাইলটিতে অ্যারে আমদানিতে 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';

নীচের মত আমদানির আওতায় এইচটিটিপিডমডুলিকে ঘোষণা করতেও মনে রাখবেন:

imports: [
    BrowserModule,
    HttpModule
  ],

4

সর্বোত্তম উপায় হ'ল নীচে হিসাবে সরবরাহকারী অ্যারেতে এইচটিটিপি যুক্ত করে আপনার উপাদানটির সাজসজ্জা পরিবর্তন করা।

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

কে এখনও এটিকে ভুল হিসাবে চিহ্নিত করেছে, আমি কি কারণ জানতে পারি?
শিবাং গুপ্ত

5
আমি ডাউনভোট করিনি, তবে কারণ সম্ভবত আপনি Httpপ্রতিটি উপাদানগুলির জন্য একটি নতুন অবজেক্ট চান না । অ্যাপ্লিকেশনটির জন্য একটি একক থাকা ভাল, যা এটি NgModuleস্তরে আমদানি করে সম্পন্ন হয় ।
টেড হপ

3

আরসি 5 এর মতো আপনাকে এইচটিটিপিডমডুলের মতো ইমপোর্ট করতে হবে:

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

তারপরে গনটার দ্বারা উল্লিখিত হিসাবে আমদানি অ্যারেতে HttpModule অন্তর্ভুক্ত করুন।


3

কেবলমাত্র নিম্নলিখিত গ্রন্থাগারগুলি অন্তর্ভুক্ত করুন:

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

এবং providersবিভাগে এইচটিপি ক্লাস অন্তর্ভুক্ত করুন :

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

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
**

সাধারণ আত্মা

**

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

এই সমাধানটি কাজ করে, তবে এইচটিএপপোমডুলটি কৌণিক 5.2-এ অবচিত হিসাবে চিহ্নিত হয়েছে। আমি মনে করি কিছু উপাদান আপগ্রেড করা হয়নি, এবং এখনও পুরাতন এইচটিটিপি বাস্তবায়ন ব্যবহার করে।
সোবওয়ান

1

আপনাকে যা করতে হবে তা হল নীচের লাইব্রেরিগুলিকে ট্যুর অ্যাপ.মডিউল.টসগুলিতে অন্তর্ভুক্ত করা এবং এটি আপনার আমদানিতে অন্তর্ভুক্ত করা:

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
দয়া করে বিদ্যমান উত্তরগুলি পুনরাবৃত্তি করবেন না। এটি করার ফলে সম্প্রদায়ের কোনও মূল্য নেই।
ইশারউড

1

import { HttpModule } from '@angular/http'; আপনার মডিউল.ts ফাইলের প্যাকেজ এবং এটি আপনার আমদানিতে যুক্ত করুন।


1

আমি কেবল এই দুটিই আমার অ্যাপ্লিকেশনটিতে যোগ করেছি ts

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

&

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

এখন এটির কাজ ঠিক আছে .... এবং এতে যুক্ত করতে ভুলবেন না

@NgModule => Imports:[] array

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.