I am getting the EXCEPTION: No provider for Http!
in my Angular app. What am I doing wrong?
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'
})
});
This question is related to
angular
Just include the following libraries:
import { HttpModule } from '@angular/http';
import { YourHttpTestService } from '../services/httpTestService';
and include the http class in providers
section, as follows:
@Component({
selector: '...',
templateUrl: './test.html',
providers: [YourHttpTestService]
If you have this error in your tests, you should create Fake Service for all services:
For example:
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; }
}
And in beforeEach:
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [
Your1Service,
Your2Service,
{ provide: Your1Service, useClass: FakeYour1Service },
{ provide: Your2Service, useClass: FakeYour2Service }
]
}).compileComponents(); // compile template and css
}));
I just add both these in my app.module.ts:
"import { HttpClientModule } from '@angular/common/http';
&
import { HttpModule } from '@angular/http';"
Now its works fine.... And dont forget to add in the
@NgModule => Imports:[] array
I faced this issue in my code. I only put this code in my app.module.ts.
import { HttpModule } from '@angular/http';
@NgModule({
imports: [ BrowserModule, HttpModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Add HttpModule to imports array in app.module.ts file before you use it.
import { HttpModule } from '@angular/http';_x000D_
_x000D_
@NgModule({_x000D_
declarations: [_x000D_
AppComponent,_x000D_
CarsComponent_x000D_
],_x000D_
imports: [_x000D_
BrowserModule,_x000D_
HttpModule _x000D_
],_x000D_
providers: [],_x000D_
bootstrap: [AppComponent]_x000D_
})_x000D_
export class AppModule { }
_x000D_
import { HttpModule } from '@angular/http';
package in your module.ts file and add it in your imports.
as of RC5 you need to import the HttpModule like so :
import { HttpModule } from '@angular/http';
then include the HttpModule in the imports array as mentioned above by Günter.
because it was only in the comment section I repeat the answer from Eric:
I had to include HTTP_PROVIDERS
Import HttpModule
in your app.module.ts file.
import { HttpModule } from '@angular/http';
import { YourHttpTestService } from '../services/httpTestService';
Also remember to declare HttpModule under imports like below:
imports: [
BrowserModule,
HttpModule
],
With the Sept 14, 2016 Angular 2.0.0 release, you are using still using HttpModule. Your main app.module.ts
would look something like this:
import { HttpModule } from '@angular/http';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [ AppComponent ],
imports: [
BrowserModule,
HttpModule,
// ...more modules...
],
providers: [
// ...providers...
]
})
export class AppModule {}
Then in your app.ts
you can bootstrap as such:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/main/app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
**
Simple soultion : Import the HttpModule and HttpClientModule on your 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 { }
All you need to do is to include the following libraries in tour app.module.ts and also include it in your imports:
import { HttpModule } from '@angular/http';
@NgModule({
imports: [ HttpModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Since rc.5 you have to do something like
@NgModule({
imports: [ BrowserModule],
providers: [ HTTP_PROVIDERS ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export default class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
>= Angular 4.3
for the introduced 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
Import HttpModule
to the module where you use it (here for example the AppModule
:
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
BrowserModule,
FormsModule, // if used
HttpModule,
JsonpModule // if used
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Importing the HttpModule
is quite similar to adding HTTP_PROVIDERS
in previous version.
The best way is to change your component's decorator by adding Http in providers array as below.
@Component({
selector: 'greetings-ac-app2',
providers: [Http],
templateUrl: 'app/greetings-ac2.html',
directives: [NgFor, NgModel, NgIf, FORM_DIRECTIVES],
pipes: []
})
Source: Stackoverflow.com