Angular EXCEPTION:没有Http的提供程序

我在Angular应用中获得了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'
})
});
233156 次浏览
小开

因为只是在评论区，我重复了Eric的回答:

我必须包含HTTP_PROVIDERS

小开
最佳答案

导入HttpModule

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


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


platformBrowserDynamic().bootstrapModule(AppModule);
理想情况下，您可以将此代码拆分到两个单独的文件中。 更多信息请阅读:

小开

因为rc.5，你必须做一些像

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


platformBrowserDynamic().bootstrapModule(AppModule);
小开

>= Angular 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。

小开

从RC5开始，你需要像这样导入HttpModule:

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

然后将HttpModule包括在上面提到的Günter的imports数组中。

小开

在2016年9月14日发布的Angular 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);
小开

最好的方法是通过在providers数组中添加Http来更改组件的装饰器，如下所示。

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

只需包含以下库:

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

并在providers节中包含http类，如下所示:

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

在app.module.ts文件中导入HttpModule。

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

还记得在import下面声明HttpModule，如下所示:

imports: [
BrowserModule,
HttpModule
],
小开

在使用HttpModule之前，将它添加到app.module.ts文件中的imports数组中。

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


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

小开

我在代码中遇到过这个问题。我只把这个代码放在我的app.module.ts中。

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


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

如果在测试中出现此错误，则应该为所有服务创建假服务:

例如:

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中:

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

你所需要做的就是在tour app.module.ts中包含以下库，并将其包含在你的导入中:

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


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

简单的方法:在你的app.module.ts上导入HttpModule和HttpClientModule

**

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

import { HttpModule } from '@angular/http';包在你的模块。Ts文件并将其添加到导入中。

小开

我只是在我的app.module.ts中添加了这两个:

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

,

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

现在它的工作很好.... 别忘了加上

@NgModule => Imports:[] array


提交答案