Angular：准备虚拟数据以使用“ng serve”启动应用程序答案

【问题标题】：Angular: prepare dummy data for starting app with 'ng serve'Angular：准备虚拟数据以使用“ng serve”启动应用程序
【发布时间】：2021-11-26 21:23:27
【问题描述】：

用于测试，例如数据表的响应能力，我想用很多条目填充数据表。然后使用“ng serve”快速完成响应性测试。

如何在 Angular 应用中检测到该应用是使用“ng serve”启动的？

我想在使用“ng serve”启动应用程序时显示虚拟数据。

这在加载表格和附加到数据行的快速测试功能时特别有用。

【问题讨论】：

您可以使用 angular.json 配置您的应用程序，以便根据所使用的环境（例如 ng serve）有不同的文件（如测试 data.json 文件）。这样您就可以根据环境更改数据源。
你有 environment.ts 文件，在该文件中你可以看到应用运行模式是开发或生产
谢谢你们。 @Igor，您能举一个简单的例子并提供答案吗？我们还将 environment.ts 用于其他测试和验收环境。

【解决方案1】：

我建议使用 json-server（或基本的 express 服务器）作为模拟 API 来提供 JSON 服务

然后使用 Angular 的 --proxy 功能将任何 API 调用重新路由到您的模拟服务器

这是我在工作过的任何地方看到的首选/唯一方法。 Defo 不会将模拟数据硬编码到您的应用程序中（特别是如果它要投入生产）

这里有一个很好的讨论：

【讨论】：

【解决方案2】：

@Drenai 的回答很棒！谢谢！

基于该答案，您可能会喜欢以下步骤以将 json-server 与您的 Angular 应用程序集成。这个“json-server”解决方案真的很有魅力！

$ npm install --save json-server

浏览到json-server git 存储库

在您的项目中创建一个模拟数据文件夹。不要将模拟文件放在资产文件夹中。
创建一个模拟数据 JSON 文件并将其放入文件夹中，例如模拟数据.json。当您可以从（正式）环境中获取实时数据时，您可以将其放入 JSON 文件中，例如：

{ "your-request-type-1" : { 你的实时数据集 1 },

"your-request-type-2" : {你的实时数据集 2 }, }
在文件夹中添加一个简单的路由器文件，例如模拟路由.json。将您的 URL 映射到模拟数据。如果您的 REST url 与请求不同，则只需要一个路由器。

{ "/api/*": "/$1",

"/journal/paged/*": "/your-request-type-1",

"/journals": "/your-request-type-2",

... }
通过将此行添加到您的 package.json 文件中，将 json-server 添加到您的构建环境。在这种情况下，我假设您的 REST 服务器在 localhost:8080 上运行。

"json-server": "json-server mockup-data\mockup-data-for-ng-serve.json --port 8080 --routes mockup-data\mockup-routes.json",

您可以通过 environment.ts 文件配置端口，或者您可以在检测到端口 4200 时设置它。这不是最好的解决方案，但工作起来非常安全。你可以通过这个变量找到端口：+${window.location.port}。

【讨论】：