Angular 无法注入 HttpClient 得到“无法解析 CustomerService 的所有参数”错误答案

【问题标题】：Angular cant inject HttpClient getting 'Can't resolve all parameters for CustomerService' errorAngular 无法注入 HttpClient 得到“无法解析 CustomerService 的所有参数”错误
【发布时间】：2018-02-26 02:55:22
【问题描述】：

我有一个customerService，我试图在其中注入httpClient。我评论 //error happens on this line 的那一行发生了错误。在我尝试将 httpClient 注入我的服务之前，一切正常。

错误信息是：

`compiler.js:485 Uncaught Error: Can't resolve all parameters for CustomerService: (?).
    at syntaxError (compiler.js:485)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15700)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:15535)
    at CompileMetadataResolver._getInjectableMetadata (compiler.js:15515)
    at CompileMetadataResolver.getProviderMetadata (compiler.js:15875)
    at compiler.js:15786
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:15746)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15314)
    at CompileMetadataResolver.getNgModuleSummary

(compiler.js:15133)`

不确定从哪里开始调试。任何帮助，将不胜感激。谢谢！

import { Observable } from "rxjs";
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable()
export class CustomerService {

    private baseUri: string = "hosthere.com"

    constructor(
        private http: HttpClient //error happens on this line
    ) { }

    get(email: string): Observable<any> {
        const uri = `${this.baseUri}/customer/${email}`;
        return this.http.get(uri).map(res => res.json());
    }
}

这是我的客户模块

import { NgModule } from "@angular/core";
import { SharedModule } from "../../shared/shared.module";

import { CustomerRouteModule } from "./cutomer.route.module";

import { SearchComponent } from "./";

import { CustomerService } from "../../services";


    @NgModule({
        imports: [SharedModule, CustomerRouteModule],
        declarations: [SearchComponent],
        providers: [CustomerService],
        exports: []
    })
    export class CustomerModule {

    }

这是我的共享模块

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule  } from "@angular/common/http";
import { AppMaterialModule } from "./app.material.module";
import { FlexLayoutModule } from "@angular/flex-layout";

import { HttpClientProvider } from "../services";


@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        HttpClientModule ,
        AppMaterialModule
    ],
    providers: [

    ],
    exports: [
        AppMaterialModule,
        FlexLayoutModule,
        FormsModule,
        HttpClientModule 
    ]
})
export class SharedModule {

}

【问题讨论】：

能否也提供一下您是如何使用客服的？
@brijmcq 我什至没有在任何地方使用它。我的应用程序简直要死了。不过编译器没有错误。
你试过重启 ng serve 了吗？
@brijmcq 我正在为这个应用程序使用 webpack。
然后尝试重启你的 webpack 服务器，这样的错误可能来自任何地方

标签： typescript angular2-routing injectable

【解决方案1】：

您可能遵循了旧的 http 指南/教程。

使用HttpClient 时，您需要提供要返回的类型，实际上，您不需要.map 使您的代码更短的数据。

get(email: string): Observable<any> {
        const uri = `${this.baseUri}/customer/${email}`;
            //add your model here something like 
            //return this.http.get<Customer>(uri);
        return this.http.get<any>(uri);
    }

请注意，如果您提供响应类型，则无需提供类型。这里的代码 sn-p 取自官方doc

getTextFile(filename: string) {
  // The Observable returned by get() is of type Observable<string>
  // because a text response was specified.
  // There's no need to pass a <string> type parameter to get().
  return this.http.get(filename, {responseType: 'text'})
    .pipe(
      tap( // Log the result or error
        data => this.log(filename, data),
        error => this.logError(filename, error)
      )
    );
}

【讨论】：

根据您的建议，我在遇到相同问题的 get return this.http.get<any>(uri); 添加了任何返回类型。

【解决方案2】：

我在这里找到了答案：

'Uncaught Error: Can't resolve all parameters for' runtime error when upgrading from Angular 4 to 5.0.1

我从我的 polyfill 中删除了反射，我很傻。

谢谢大家的帮助。

【讨论】：

【解决方案3】：

创建新文件或添加到现有文件 polyfills.ts

import 'core-js/es7/reflect';

包含到 webpack.config

module.exports = {
    mode: 'production',
    devtool: 'source-map',
    entry: {
        'app': './ClientApp/main.ts',
        'polyfills': './ClientApp/polyfills.ts'
    },...

对我有帮助

【讨论】：