Search code examples
typescriptangular2-routinginjectable

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


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 {

}

Solution

  • 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.