为 Angular 导入模拟数据

Question

So I am conditionally including an HTTPInterceptor into my application to provide mock data in the mock environment (the app.module.ts includes this:

import { fakeBackendProvider } from './mock-backend/fake-bakend';

// Snip

if (environment.mock) {
  // used to create fake bakend
  providers.push(fakeBackendProvider);
}

and I am wondering the best way to include the mock data (which is just json files) in fake backend. Currently I am just importing them in the top as it is easiest with the least amount of code:

import * as fakeData from './data.json';

however I am want to be sure that when the environment.mock is set to false and the project is built, this code will get properly tree shocken and not included in the dist. Is it better to conditionally import the when I need it

import('./data.json').then(fakeData => {

});

This is slightly more complicated because I can't just use Observable.of and requires a few more lines of code (not a big deal, but there is a bunch of these fake data json files) or will this get included in the single dist file as well and I have to actually use the httpClient to load the data from the assets directory?

What is the best practice here, or at least the practive that won't end up with my mock data getting bundled with production?

Answer 1

I would simply use an http.get() and load json result on the fly, like this:

this.http.get('./assets/data.json').subscribe(data => {
  // lets assume you have a service for storing your mock data called "fakeDataProvider"
  this.fakeDataProvider.push(data);
});

If however you need to load json data before the bootstrap of your application, you can always use javascript fetch() :

fetch('./assets/config.json')
.then(response => {
  return response.json().catch(error => {
    return Promise.reject(new BootstrapError(error, response));
}).then(config => {
  // set a global variable in your application
})

By loading them via an HTTP request you can be sure those data will not be included in the production bundle.