为 Angular 导入 Mock 数据答案

【问题标题】：Importing Mock data for Angular为 Angular 导入 Mock 数据
【发布时间】：2020-02-26 15:45:34
【问题描述】：

所以我有条件地在我的应用程序中包含一个 HTTPInterceptor 以在模拟环境中提供模拟数据（app.module.ts 包括：

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

// Snip

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

我想知道在假后端中包含模拟数据（只是 json 文件）的最佳方式。目前我只是将它们导入顶部，因为它最简单，代码量最少：

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

但是我想确保当 environment.mock 设置为 false 并构建项目时，此代码将得到适当的树冲击，并且不包含在 dist 中。在我需要的时候有条件地导入会更好吗

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

});

这稍微复杂一些，因为我不能只使用 Observable.of 并且需要更多的代码行（没什么大不了的，但是有一堆这些假数据 json 文件）或者这会被包含在单个 dist 文件也是如此，我必须实际使用 httpClient 从 assets 目录加载数据？

这里的最佳实践是什么，或者至少是不会让我的模拟数据与生产捆绑在一起的实践？

【问题讨论】：

标签： angular webpack

【解决方案1】：

我会简单地使用 http.get() 并即时加载 json 结果，如下所示：

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);
});

如果您需要在启动应用程序之前加载 json 数据，您可以随时使用 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
})

通过 HTTP 请求加载它们，您可以确保这些数据不会包含在生产包中。

【讨论】：