Angular cant inject HttpClient getting 'Can't resolve all parameters for CustomerService' error

Question

I have a customerService where im trying to inject httpClient. Error is happening on the line where i commented //error happens on this line. Everything works until i try to inject httpClient into my service.

Error message is :

`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)`

Not sure where to start debugging this. any help would be appreciated. thank you!

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());
    }
}

Here is my Customer Module

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 {

    }

Here is my shared module

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 im not even using this anywhere. my application simply dying. no errors in compiler though. — kkdeveloper7, Feb 26 '18 at 03:13
then try to restart your webpack server, errors like this could come from anywhere — brijmcq, Feb 26 '18 at 03:22
@brijmcq i have already done that. i also made sure i have `"emitDecoratorMetadata": true,` in my `tsconfig.json` file — kkdeveloper7, Feb 26 '18 at 03:24
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165801/discussion-between-brijmcq-and-kkdeveloper7). — brijmcq, Feb 26 '18 at 03:26

score 1 · Answer 1 · answered Feb 26 '18 at 03:08

You probably followed an old guide/tutorial for http.

When using HttpClient, you need to provide the type you want to return, in effect, you don't need to .map the data making your code somewhat shorter.

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);
    }

Note that you don't need to provide a type if you provide a response type. Here's a code snippet taken from official 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)
      )
    );
}

per your suggestion i added a return type of any to a get `return this.http.get(uri);` experiencing same issue. — kkdeveloper7, Feb 26 '18 at 03:14

score 0 · Accepted Answer · answered Feb 26 '18 at 04:06

0

i found an answer here:

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

I removed reflection from my polyfills, silly me.

Thank you all for help.

answered Feb 26 '18 at 04:06

kkdeveloper7

497
2
11
25

score 0 · Answer 3 · answered Jun 23 '18 at 18:07

Create new file or add to exists polyfills.ts

import 'core-js/es7/reflect';

include to webpack.config

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

it's help for me

Angular cant inject HttpClient getting 'Can't resolve all parameters for CustomerService' error

3 Answers3