代码之家 › 专栏 › 技术社区 › Ke Vin

原始异常:没有Http提供程序!在Angular2中尝试使用HTTP.GET使用REST服务

http-get typescript angular

Ke Vin · 技术社区 · 8 年前

我试图实现的是使用Restfull服务 HTTP.Get 在angular2中,我只是在学习一些教程并阅读文档,但我仍然没有理解

下面是我的工作,首先是我的应用程序结构,我使用Angular CLI Webpack创建了这个项目

然后,我使用angular CLI命令“ng generate service restfull”创建了一个服务类,然后我更新了我的类,以便 restfull.service.ts 看起来像这样:

import { Injectable } from '@angular/core';
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response} from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class RestfullService {

  constructor(private http:Http) { }

  getDashboard(){
    return this.http.get('http://localhost:8080/localservice/getdashboard/HUT17').map((res:Response) => res.json());
  }

}

app.component.ts

import { Component } from '@angular/core';
import { NavbarComponent } from './navbar';
import { RestfullService } from './restfull.service';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [NavbarComponent],
  providers: [RestfullService]
})

export class AppComponent {
  title = 'app works!';

  public active;

  constructor(private _restfull: RestfullService) { }

  getRest(){
    this._restfull.getDashboard().subscribe(
      data => {this.active = data},
      err => console.error(err),
      () => console.log('done loading foods')
    );
  }
}

我想这就是我所需要的,对吗?我错过了什么吗?它在firebug控制台中显示了此错误:

错误:未捕获(承诺中):异常:./AppComponent类中有错误 AppComponent_Host内联模板:0:0原始异常:否 Http提供程序!原始堆栈跟踪: 基本异常@ http://localhost:4200/main.bundle.js:1811:23 http://localhost:4200/main.bundle.js:28260:9 无提供商错误@ http://localhost:4200/main.bundle.js:28297:9 反射喷油器_ throwOrNull@ http://localhost:4200/main.bundle.js:56208:19 反射喷射器按键默认设置@ http://localhost:4200/main.bundle.js:56236:20 按键反射喷油器@ http://localhost:4200/main.bundle.js:56199:20 反射注入ectorhttp://localhost:4200/main.bundle.js:56008:16 NgModuleInj公司ectorhttp://localhost:4200/main.bundle.js:40727:40 匿名/_View_AppComponent_Host0.prototype.createInternal@AppComponent.ngfactory.js:18:56 应用价值iewhttp://localhost:4200/main.bundle.js:56772:16 调试应用程序Viewhttp://localhost:4200/main.bundle.js:56985:20 组件Factoryhttp://localhost:4200/main.bundle.js:40380:27 应用程序参考_http://localhost:4200/main.bundle.js:27082:23 平台参考模块引导/<@ http://localhost:4200/main.bundle.js:26940:82 平台参考模块DoBootstrap@ http://localhost:4200/main.bundle.js:26940:13 平台Refhttp://localhost:4200/main.bundle.js:26919:21 Zonehttp://localhost:4200/polyfills.bundle.js:3389:20 NgZoneImpl/this.inner<。onInvoke(调用)@ http://localhost:4200/main.bundle.js:44849:32 Zonehttp://localhost:4200/polyfills.bundle.js:3388:20 Zonehttp://localhost:4200/polyfills.bundle.js:3282:25 scheduleResolveOrReject/<@ http://localhost:4200/polyfills.bundle.js:3637:53 Zonehttp://localhost:4200/polyfills.bundle.js:3422:24 NgZoneImpl/this.inner<。onInvoke任务@ http://localhost:4200/main.bundle.js:44840:32 Zonehttp://localhost:4200/polyfills.bundle.js:3421:24 Zonehttp://localhost:4200/polyfills.bundle.js:3322:29 排水微任务队列@ http://localhost:4200/polyfills.bundle.js:3540:26

错误上下文:[对象对象]

我认为关键是“没有http提供商”,对吗?但我已经把它放在我的 resfull.service.ts 同学们,我错过了什么?

2 回复 | 直到 8 年前

hendrix 8 年前

你必须提供 HTTP_PROVIDERS 对于您的应用程序,如下所示:

@Component({
    selector: 'app',
    templateUrl: 'app.component.html',
    providers: [
        HTTP_PROVIDERS
    ],
    directives: []
})
export class AppComponent {
...
}

R2C2 8 年前

自RC以来。5您应该导入 HttpModule app.module.ts )就像这样:

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