无法读取位于与 Angular 2/4 中资产文件夹不同的任何文件夹中的 json 文件答案

【问题标题】：Unable to read the json files which is located in any folder different from assets folder in Angular 2/4无法读取位于与 Angular 2/4 中资产文件夹不同的任何文件夹中的 json 文件
【发布时间】：2018-03-18 15:09:06
【问题描述】：

尝试使用以下脚本在 Angular 4 项目中使用 http.get 读取 json 文件。

http.get('../jsonmock/data.json')
.subscribe(res  =>  this.data = res.json() );

如果我尝试从 assets 文件夹中读取 json 文件，它会成功运行，但从任何其他文件夹中我在控制台上收到以下错误

http.get('../jsonmock/data.json') .subscribe(res => this.data = res.json());

响应 {_body: "↵↵↵↵↵↵", status: 404, ok: false, statusText: "Not Found", headers: Headers, …} 标题：标题 {_headers: Map(8), _normalizedNames: Map(8)} 好的：错误的状态： 404 状态文本： “未找到” 类型： 2 网址： "http://localhost:4200/jsonmock/data.json" _身体： “↵↵↵↵错误↵↵↵

无法获取 /jsonmock/data.json

↵↵↵" 原型：身体构造函数： ƒ 响应(responseOptions) 论据： (...) 呼叫者： (...) 长度： 1 姓名： “回复” 原型：主体{构造函数：ƒ，toString：ƒ} 原型： ƒ 身体() [[功能位置]] ： http.es5.js:900 [[范围]] ：范围[3] 到字符串： ƒ ()

【问题讨论】：

假设您使用 CLI，一旦您构建或提供应用程序，webpack 会将您的应用程序捆绑在一起并将其部署在不同的目录（分发目录）中。这意味着捆绑后，您的应用程序只能访问捆绑的内容或复制到资产文件夹中的内容。我会按照 DeborahK 的建议做，并将 json 加载到您的资产中

标签： json angular

【解决方案1】：

如果您使用的是 Angular CLI ...它只会在 .angular-cli.json 文件中指定的文件夹中查找资产。

在“apps”节点中有一个名为“assets”的节点：

  "assets": [
    "assets",
    "api",
    "favicon.ico"
  ],

默认情况下，这里只有资产和网站图标。如果您希望它在其他位置查找 .json 文件，则需要在此处指定这些位置，就像我对 api 文件夹所做的那样。

【讨论】：