在浏览器中本地访问JSON文件中的数据，无需单独的网络调用

假设我们有一个JSON文件，其中包含Angular 5应用程序的静态数据。我们希望将其“嵌入”到应用程序脚本中，因此当我们希望从中获取数据时，应用程序不会为其往返于服务器

---

您能否解释如何从配置Angular CLI（如果需要）到从该JSON文件返回数据的TypeScript代码实现此功能？

您可以简单地使用JSON文件，就好像它是服务中的url端点一样

如果在

assets/foo.json

中有一个名为

foo.json

的文件，只需将该路径嵌入到http调用中即可

//this is in src/ directory which is one layer deep from assets
@Injectable()
export class MyService {
  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('../assets/foo.json');
  }
}

---

也许json服务器可以做到，在这里检查一下：不确定我是否完全理解您想要做什么，但如果您只是想加载json数据，比如存储在变量中的某些数据，您可以解析它并将其分配给变量，而不是将其保存在单独的文件

export const data=json.parse（`paste your json here`）

@WilhelmOlejnik:Yes，我只想将JSON的内容加载到一个变量中。这是因为JSON是由某个工具作为构建过程的一部分创建的。所以我想知道，在改变工具/构建过程之前，加载JSON文件的任务是否是Angular world中的普通任务。只要JSON在assets文件夹中，它就会在应用程序的某个部分传递给客户机。您可以使用HttpClient读取文件内容，并以任何方式使用数据。@R.Richards：当然可以，但问题是如何在不向服务器进行单独HTTP调用的情况下执行此操作。这是绝对正确的，但问题是如何在不进行额外服务调用的情况下获取数据。基本上，我正在寻找一种方法，使其成为应用程序捆绑包的一部分。一项服务将与你的应用程序捆绑在一起，而且它不会进行真正的网络呼叫……这很有趣！对不起，我不知道。我已经做了一个测试，但它并没有点击http.get（）的

subscribe（）

方法。你能看一下吗？它在stackblitz上不起作用，将

。/assets/foo.json

转换为

assets/foo.json

，它应该在本地工作。如果不为

foo.json

对服务器进行网络调用，它在本地就不能工作。尝试在

this.http.get（）

上设置断点，然后关闭web服务器并清除浏览器缓存-它永远不会进入该调用的

subscribe（）

。