CODEWITHSUNDEEP
angulartypescriptvisual-studio-code
Shehram Tahir
Shehram Tahir

Reputation: 971

"@angular/http/index has no exported member of HTTP_PROVIDERS"

Dependencies

enter image description here

main.ts file

enter image description here

I want to import HTTP_PROVIDERS but is is giving me error that

"@angular/http/index has no exported member of HTTP_PROVIDERS"

I have attached images of package.json and main.ts file.

Upvotes: 7

Views: 10091

Answers (4)

Dinnu Buddy
Dinnu Buddy

Reputation: 399

HttpModule –

Http deprecate @angular/http in favour of @angular/common/http.

OLD One : HttpModule imported from –

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

NEW One: The HttpClientModule imported form -

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

They both support HTTP calls but HTTP is the older API and will eventually be deprecated.

The new HttpClient service is included in the HttpClientModule that used to initiate HTTP request and responses in angular apps. The HttpClientModule is a replacement of HttpModule.

Upvotes: 0

Vaibs
Vaibs

Reputation: 2106

Just to add. Its specifically HttpModule and not HTTPModule or HTTPmodule or anything.

Upvotes: 0

AVJT82
AVJT82

Reputation: 73367

HTTP-PROVIDERS is not used anymore. Import HttpModule to your ngModule instead and add it to your imports.

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

@NgModule({
  imports: [
    ...
    HttpModule,
  ],
  declarations: [...],
  bootstrap: [ .. ],
  providers: [ ... ],
})

I suggest you always check angular.io page for current info. E.g, here usage of Http and everything that's needed is described :)

In the service you want to use http, you import Http and inject it in your constructor:

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

// ...

constructor(private http: Http) { }

Upvotes: 7

Matthias247
Matthias247

Reputation: 10416

You main module should import HttpModule, which contains the HTTP Provider. That's the most recent way of doing it.

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

@NgModule({
  declarations: [],
  imports: [
    // ...,
    HttpModule,
  ],
  providers: [],
})
export class AppModule{
}

Upvotes: 0

Related Questions