0

I have upgraded my angular app from 5.1.1 to 6 and facing some issues with HttpClient and all. I am getting error once I start my app. I have searched this issue on google but did not find perfect solution. Can someone tell me what should be the correct way to do this?

Error :

AppComponent_Host.ngfactory.js? [sm]:1 ERROR Error: StaticInjectorError(AppModule)[UserStoreApiService -> HttpClientModule]: 
  StaticInjectorError(Platform: core)[UserStoreApiService -> HttpClientModule]: 
    NullInjectorError: No provider for HttpClientModule!
    at NullInjector../node_modules/@angular/core/fesm5/core.js.NullInjector.get (vendor.js:55249)

component.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
import { AuthHttp } from 'angular2-jwt';

import { ConfigService } from '../../config.service';

@Injectable()
export class UserStoreApiService {
  userStoreUrl: string;

  constructor(private http: AuthHttp,
              private _http: HttpClient,
              private config: ConfigService) {}

  private setUrl() {
    if (this.userStoreUrl === undefined) {
      this.userStoreUrl = this.config.get('userstore');
    }
  }

  public getUrl(apiUrl: string, headers: any) {
    this.setUrl();
    return this.http.get(this.userStoreUrl + apiUrl, headers);
  }

  public postUrl(apiUrl: string, data: string, header: any) {
    this.setUrl();
    let headers = new Headers();
    headers.append('authorization', 'Bearer ' + localStorage.getItem('access_token'));
    headers.append('Access-Control-Allow-Origin', '*');
    return this.http.post(this.userStoreUrl + apiUrl, data, { headers });
  }

  public putUrlWithFormData(apiUrl: string, data: any) {
    this.setUrl();
    let headers = new Headers();
    headers.append('authorization', 'Bearer ' + localStorage.getItem('access_token'));
    headers.append('Access-Control-Allow-Origin', '*');
    return this._http.put(this.userStoreUrl + apiUrl, data, {headers});
  }

  public putUrl(apiUrl: string, data: string, headers: any) {
    this.setUrl();
    return this.http.put(this.userStoreUrl + apiUrl, data, headers);
  }

  public deleteUrl(apiUrl: string, headers: any) {
    this.setUrl();
    return this.http.delete(this.userStoreUrl + apiUrl, headers);
  }

  public getRoot() {
    this.setUrl();
    return this.userStoreUrl;
  }
}
Radiant
  • 360
  • 3
  • 26
  • DId you import the HttpClientModule in your core module with `import { HttpClientModule } from '@angular/common/http';` under `imports [..., HttpClientModule, ...]`? – Matthias Sommer Jun 29 '18 at 11:41
  • @MatthiasSommer..yeah..i have already imported import { HttpClientModule } from '@angular/common/http'; in my app.module.ts file and in this component also. Now I am getting another error for header...TS2345: Argument of type '{ headers: Headers; }' is not assignable to parameter of type 'RequestOptionsArgs'. – Radiant Jun 29 '18 at 11:45
  • See [this post](https://stackoverflow.com/questions/44735960/argument-of-type-headerheader-is-not-assignable-to-parameter-of-type-requ) – Matthias Sommer Jun 29 '18 at 12:15

0 Answers0