logo The World’s #1 Bootstrap 4 HTML, Angular 9, React, VueJS & Laravel
Admin Dashboard Theme

Mock Back-end

Overview

Metronic Angular use a mock back-end for demo purpose. It's called in-memory web api for Angular demos and tests that emulates CRUD operations over a RESTy API.

It intercepts Angular Http and HttpClient requests that would otherwise go to the remote server and redirects them to an in-memory data store that you control.

For more info on the library: https://github.com/angular/in-memory-web-api

How switching to the Real REST API

You have to disable the mock back-end for the built Angular's Http and HttpClient requests to work normally. Check in the files /src/app/core/_base/metronic/server/fake-api/ and /src/app/core/e-commerce/_server/ which contains all the dummy data for the mock back-end.

When your Real back-end is done, follow the next two steps for switching to the real REST API:

  • 1. Change the configuration line in your /src/environments/environment.ts file:

    
    export const environment = {
      production: false,
      isMockEnabled: true // You have to set 'true', when your real back-end is done
    };

  • 2. Switch paths to services in /src/app/core/e-commerce/services/index.ts file:

    
    // export { CustomersService } from './customers.service.fake';
    export { CustomersService } from './customers.service';
    
    // export { ProductsService } from './products.service.fake';
    export { ProductsService } from './products.service';
    
    // export { ProductRemarksService } from './product-remarks.service.fake';
    export { ProductRemarksService } from './product-remarks.service';
    
    // export { ProductSpecificationsService } from './product-specifications.service.fake';
    export { ProductSpecificationsService } from './product-specifications.service';