angular2 setup mock environment using JSON file

Question

I am trying to set up a mock environments as follows inspired by this.

environment.mock.ts

export const environment = {
  production: false,
  PRODUCT_LIST : 'http://localhost:4200/app/mock-json/products.json',
  SAVE_CART : 'http://localhost:4200/app/mock-json/cart.json'
};

environment.ts

export const environment = {
  production: false,
  PRODUCT_LIST : 'http://x.x.x.x:9000/service/products',
  SAVE_CART : 'http://x.x.x.x:9000/service/cart'
};

Service Method

getCartData (request: string):Promise<Cart[]>{
    return this.http.post(environment.SAVE_CART, request)
                .toPromise()
                .then(response => {
                        .....
                })
                .catch(this.handleError);
  }

While I am running with ng serve then everything is running fine with original service endpoint.

But while I am using ng serve --environment=mock the Save Cart functionality is not working because of POST call. (All the GET call is working fine)

Actually I need to setup the structure in such a way that,

using ng serve. I could switch to original implementation which will use original service end points.
using ng serve --environment=mock I could switch to mock implementation which will uses JSON files.
At the time of switching I do not need to touch any code. For mock implementation a set of predefined data will be serve always since my JSON file is hard coded.

Note: I have updated the main question to clarify the context what I am looking for. Same kind of error I am getting in this following Plunker (Please check console log). But note: this plunker does not implements the emvironments, so solving this plunker may not solve my problem.

your json is malformed in the plunker { "name" : "Test", "value" : "Test" } — Suraj Rao
– Suraj Rao, Commented Jan 13, 2017 at 13:33
You cannot post to a .json file... Why not use the real mockService that is shipped with Angular (MockBackend from '@angular/http/testing' ? — MikeOne
– MikeOne, Commented Jan 13, 2017 at 13:45
One thing come to my mind that at the time of mock env use if we can inherit and override Http post method to use get method? Will it help? — Partha Sarathi Ghosh
– Partha Sarathi Ghosh, Commented Jan 16, 2017 at 6:25

Community · Accepted Answer · 2017-05-23 10:31:14Z

2

Your json was malformed. Check the updated plunker link.

plunker here

mymodel.json:

{
  "name" : "Test",
  "value" : "Test"
}

Inorder to do post, you have to use Mockbackend which is going to receive the post request. Check this answer

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Jan 13, 2017 at 13:23

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Partha Sarathi Ghosh Over a year ago

Yes. You are right. Though my expectation is little different. I have updated again with more information.

Partha Sarathi Ghosh · Accepted Answer · 2017-01-16 08:35:25Z

I have been able to figure it out with the following idea .

At the time of mock environment use, if we can inherit and override Angular2 Http post method to use get method

Here is the following code which solve my problem.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { RequestOptionsArgs, RequestOptions } from "@angular/http";
import { ConnectionBackend, Http, Request, Response, Headers } from "@angular/http";

@Injectable()
export class MockHttp  extends Http {

    constructor(backend: ConnectionBackend,
        defaultOptions: RequestOptions) {
        super(backend, defaultOptions);
    }

    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> {
        console.log('Mock Http POST...');
        return super.get(url, options).catch(err => {
            console.log(err);
            if (err.status === 404) {
                console.log('404 error');
                return Observable.throw(err);
            }
        });
    }
}

And I used the following provider in my AppModule

    { 
        provide: Http, 
        useFactory: (
            backend: XHRBackend,
            defaultOptions: RequestOptions) => {
                if(environment.MOCK){
                    return new MockHttp(backend, defaultOptions)
                }
                else {
                    return new Http(backend, defaultOptions);
                }
        },
        deps: [XHRBackend, RequestOptions]
    }

And Introduced on new environment variable MOCK as this.

export const environment = {
  production: false,
  MOCK : true,
  PRODUCT_LIST : .....
};

Collectives™ on Stack Overflow

angular2 setup mock environment using JSON file

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related