Ionic2 angula http and TranslateService

Team,

I ran into this issue a few minutes ago.

  1. Ionic2 app consuming HAL or HATEAOS REST services API build using spring and Java Technologies.

  2. Angular Http works well and data is successfully retrieve from server side without any known issues. I read the Translate service documentation and successfully bootstrapped it as such:

ionicBootstrap(MyApp, [HTTP_PROVIDERS, {
        provide: TranslateLoader, 
        useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
        deps: [Http],
        tabbarPlacement: 'bottom'
   },
  TranslateService
]) 

Again the above works well when using HTTP. However, I when use a wrapper Http class–HttpClient class that reads some information from the LocalStorage before making a request for resources to the server side. I get the annoying no provider error. I understand I need to change the above code in some way. I have tried different variations, to no avail and all responses or directives I have seen so far reference doing the same thing with Http class and nothing with a wrapper class in collaboration with the Translate Service.

Here is my HttpClient class:

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { JwtHelper } from 'angular2-jwt';
import { Storage, LocalStorage } from 'ionic-angular';

/*
  A custom wrapper to include headers for API authentication.
  Header info is stored in local storage.
*/

@Injectable()
export class HttpClient {
    private local: Storage;
    private headers: Headers;
    private jwtHelper: JwtHelper;

    constructor(private http: Http) {
        this.headers = new Headers();
        this.local = new Storage(LocalStorage);
        this.jwtHelper = new JwtHelper();
    }

    buildHeaders() {
        let headers = new Headers({
            'Accept': 'application/json',
            'Content-Type': 'application/json; charset=utf-8'
        });
        return this.local.get("X-Auth-Token")
            .then((token) => {
                headers.append("X-Auth-Token", token);
                return headers;
            });
    }

    getData(url) {
        return Observable
            .fromPromise(this.buildHeaders())
            .switchMap((headers) => this.http.get(url, { headers: headers }));
    }

    getUserId() {
        return this.local.get("X-Auth-Token")
            .then((token) => {
                return this.jwtHelper.decodeToken(token);
            });
    }

    patchData(url, data) {
        return Observable
            .fromPromise(this.buildHeaders())
            .switchMap((headers) => this.http.patch(url, data, { headers: headers }));
    }

    putData(url, data) {
        return Observable
            .fromPromise(this.buildHeaders())
            .switchMap((headers) => this.http.put(url, data, { headers: headers }));
    }
}

From the above code, all I am doing is loading a JWT token from the local storage and make a call to the server for resources. When I inject this HttpClient in a component I get the no provider error.

Can you’ll angular pros help me out figure this out. I still consider myself a nouveau on the angular/ionic space.

Thanks in advance.