Question

对于我们的一个项目，我需要使用HTTP包装器，它将为每个请求发送一个授权标头。但是，在使用npm start加载页面时，我在控制台中收到以下错误：

EXCEPTION: Error in http://localhost:3000/app/app.component.html:2:2 caused by: No provider for HttpClient! ORIGINAL EXCEPTION: No provider for HttpClient!

注意：为了不粘贴所有代码，我使用点（“...”）来表示“不言自明”的东西，例如导入核心库等。我也使用“占位符”来替换我无法透露的名称。

对于我正在使用的包装器，我发现了以下内容：

http.wrapper.ts ：

import { Injectable } from '@angular/core';
import { Http, Headers, Response, RequestOptions } from '@angular/http';

@Injectable()
export class HttpClient {
   ...
}

在我的API服务中，我执行以下操作来使用HTTP包装器：

api.service.ts ：

import { Injectable, OnInit } from '@angular/core';
import { Response } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import { HttpClient } from '../http.wrapper';

@Injectable
export class APIService implements OnInit {
   ...

   constructor(private httpClient: HttpClient) {}

   getActiveScenarios(): Observable<Scenario[]> { ... }
}

app.module.ts ：

...
import { HttpClient } from './common/http.wrapper';
import { MyModule } from './placeholder/my-module.module';
...

@NgModule({
   imports: [BrowserModule, MyModule],
   declarations: [AppComponent],
   exports: [AppComponent, BrowserModule],
   bootstrap: [AppComponent]
})
export class AppModule {}

我-module.component.ts ：

import { ApiService } from '../placeholder/services/api.service';

@Component({
   moduleId: module.id,
   selector: 'placeholder',
   templateUrl: './my-module.component.html',
   providers: [ ApiService ]
})
export class MyModuleComponent implements OnInit {
   constructor(private apiService: ApiService) {}

   ngOnInit() {}

   ...
}

Answer 1

将HttpClient添加到模块的提供者列表中，以便将其注入注入器。

app.module.ts

...
import { HttpClient } from './common/http.wrapper';
import { MyModule } from './placeholder/my-module.module';
...

@NgModule({
   imports: [BrowserModule, MyModule],
   declarations: [AppComponent],
   exports: [AppComponent, BrowserModule],
   providers: [HttpClient],
   bootstrap: [AppComponent]
})
export class AppModule {}

Answer 2

您需要导入HttpModule

imports: [BrowserModule, MyModule, HttpModule],

使HttpClient可用。

AngularJS 2 - 使用HTTP Wrapper - 获取“No Provider！”错误

2 个答案:

app.module.ts