Angular 4 backendless development with the new HttpClient

Question

Before switching to HttpClient from Http, I had a backendless setup using MockBacked. I had a file called mock-backend.provider.ts that looked like:

import {
    Http, BaseRequestOptions, Response, ResponseOptions,
    RequestMethod, XHRBackend, RequestOptions
} from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';

import { subscribers } from '../jsons/subscribers.json';
import { TokenService } from '../../authentication/token.service';

export function mockBackendFactory(backend: MockBackend, options: BaseRequestOptions,
    realBackend: XHRBackend) {

    // configure fake backend
    backend.connections.subscribe((connection: MockConnection) => {
        // wrap in timeout to simulate server api call
        setTimeout(() => {
            let url = connection.request.url;
            let method = connection.request.method;

                if (url.endsWith('/demographic/subscriber') && method === RequestMethod.Get) {
        let tokenService: TokenService = new TokenService();

        // get username from token
        let username = tokenService.getUsername();

        // find if any subscriber matches login credentials
        let filteredSubscriber = subscribers.filter(subscriber => {
            return subscriber.username === username;
        });

        // check to see if the user exists
        if (filteredSubscriber.length) {
            let subscriber = filteredSubscriber[0];
            connection.mockRespond(new Response(new ResponseOptions({
                status: 200,
                body: {
                    "subscriber": {
                        "id": subscriber.id,
                        "firstName": subscriber.firstName,
                        "lastName": subscriber.lastName,
                        "username": subscriber.username,
                        "preferredEmail": subscriber.preferredEmail
                    }
                }
            })));
        } else {
            // else return 400 bad request
            connection.mockError(new Error('Unauthorized'));
        }

        return;

        }, 500);

    });

    return new Http(backend, options);
}

export let MockBackendProvider = {
    provide: Http,
    useFactory: mockBackendFactory,
    deps: [MockBackend, BaseRequestOptions, XHRBackend]
};

and in my core.module.ts file I would put MockBackendProvider in the "providers" section.

This would allow me to mock up the json responses very quickly and I had it setup to toggle this provider based on an environment variable.

When I switched to using the HttpClient...it no longer takes a backend parameter directly as it uses the HttpHandler which does take a backend but I can't seem to get it to accept the MockBackend.

I don't believe that my current setup can be done using HttpClient and I am ok with that but I have no idea how to setup a backendless flow with the new modules.

Any and all help will be insanely appreciated! If you need to see more code please let me know.

Answer 1

I have solved this by using an interceptor.

I have mocked up an example for anyone that would like to see how I have this working: https://github.com/GetDaStick/backendless-example/blob/master/src/app/core/http/mock-http.interceptor.ts