Angular：为 'ng serve' 启动应用程序准备虚拟数据

Angular: prepare dummy data for starting app with 'ng serve'

用于测试，例如数据 tables 的响应能力，我想用很多条目填充数据 table。然后使用 'ng serve'.

快速测试响应能力

如何在 Angular 应用程序中检测到该应用程序是使用 'ng serve' 启动的？

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

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

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

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

这是我工作过的任何地方都见过的 preferred/only 方法。 Defo 不会将模拟数据硬编码到您的应用程序中（尤其是当它要投入生产时）

这里对此有很好的讨论：

@Drenai 的回答很好！谢谢！

根据该回答，您可能会喜欢以下步骤以将 json-服务器与您的 Angular 应用集成。这个 'json-server' 解决方案真的很有魅力！

  1. 获取json服务器

$ npm install --save json-server

  1. 访问有用的文档。您将很快了解这个漂亮的模拟服务器的强大功能。

Browse to the json-server git repository

  1. 在您的项目中创建一个模拟数据文件夹。不要将模拟文件放在资产文件夹中。

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

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

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

  3. 在文件夹中添加一个简单的路由器文件，例如模拟-routes.json。将您的 URL 映射到模拟数据。如果您的 REST url 与请求不同，您只需要一个路由器。

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

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

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

    ... }

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

    上 运行ning

"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}.

  1. 启动json服务器：$ npm 运行 json-server

  2. 通过'ng serve'

    启动您的应用