RC0: create a custom http service that extends https

Ionic Framework ionic-v3
1

I’m moving from an ES6 project (beta11) to a new project with rc0 and I’m having some problems to rewrite a custom http service I had.

In my providers/ folder I have customhttp.ts:

import {Injectable } from "@angular/core";
import {Http, Headers} from "@angular/http";
import {RequestOptions, XHRBackend} from '@angular/http';
@Injectable()

export class CustomHttp extends Http {
  constructor(xhrBackend: XHRBackend, requestOptions: RequestOptions) {
    super(xhrBackend, requestOptions);
   }
  //some other methods, which override the defaults from Http
}

in my app.mmdule.ts I have imported this and added as a provider
import {CustomHttp} from ‘…/providers/customhttp’;
…

@NgModule({
  ...
  providers: [CustomHttp]
})

in a page I’m trying to use it

import {CustomHttp } from '../../providers/customhttp';
export class CheckAccess {
  constructor(private customHttp: CustomHttp)
}

the .ts are compiled but the browser outputs

error_handler.js:45EXCEPTION: Uncaught (in promise): Error: Error in ./CheckAccess class CheckAccess_Host - inline template:0:0 caused by: No provider for ConnectionBackend!

I can’t find out what I’m doing wrong. Can anyone help?

1 Like
2

I had same error message “No provider for [service class name]”

As for my case, I had components ParentComponent, ChildComponent and CustomService.
ParentComponent has the ChildComponent in the template as a selector(’’) and both components are injected with CustomService. After that, I had the error message ‘No provider for CustomService’

So I changed the way of injection in ChildComponent from constructor to ReflectiveInjector and then I had no problem. I don’t know why it happened.

3

I could do rewriting my component. Instead of extend Http, i did the folowing:

import {Injectable } from "@angular/core";
import { Http } from '@angular/http';

@Injectable()

export class CustomHttp {

  constructor(private http: Http) {
  
  }
  
  post(url, data) {

    let xhr = this.http.post(url, data) ;
    xhr.url = url;
    return xhr;
  }

}

My CustomHttp is a simple class with Http injected, and I kind of “composed” the post method: the CustomHttp has a post() m,ethod that receives the same parameters from the one from Http and it calls the method from Http and returns the xhr object.

4

Hi, we opened a similar question on another thread but we have also other questions, see it below.

@chrisbenseler for your problem, as described in my post below you have to register the CustomHttp provider to providers in app.module.ts.
Did you resolve anything by your own? Can you share how is the status quo of your issue?

5

I’m using this solution I posted before. Going to post the full code

import { Injectable } from "@angular/core";
import { Http, Headers } from '@angular/http';

@Injectable()
export class CustomHttp { 
  constructor(public http: Http) {
  }
 
  build_headers(): Headers {
    let headers = new Headers();
    //here there is some logic to build custom headers for my app
    return headers;
  }

  get(url: string) {
    let xhr = this.http.get(url, { headers: this.build_headers() });
    return xhr;
  }

  post(url: string, data) {
    let xhr = this.http.post(url, data, { headers: this.build_headers() } ) ;
    return xhr;
  }
}

in app.module.ts I have added the CustomHttp to my providers:

providers: [CustomHttp] //etc

and in my services, I can use it this way:

import {CustomHttp} from "./customhttp";
@Injectable()
export class POService {
	constructor(public http: CustomHttp) {
		//this.http is istance of CustomHttp
	}
}
6

so you resolved your issue?

7

This code ignores the options parameter. I think it would be more correct to pass it to build_headers and extend it if provided.

8

There was a typo in my code. The get method does not take any other argument rather than the url (with the querystring).
The right code is:

get(url: string) {
	let xhr = this.http.get(url, { headers: this.build_headers() });
	return xhr;
}

I will update the example.

9

You should add your provider in app.module.ts:

    @NgModule({
  ...
  providers: [
    ...
    {
      provide: Http,
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => {
        return new CustomHttp(backend, defaultOptions);
      },
      deps: [XHRBackend, RequestOptions]
    }

  ]
})