JSON 文件放在 Angular 项目中的什么位置？

Question

我想打开我创建的 JSON 文件。 正在读取 JSON 文件的源代码位于 node_modules 目录中。 我尝试将 JSON 文件放在一个公共目录（与 src 相同的级别）中，但仍然显示以下错误：在此服务器中找不到请求的资源。

读取 JSON 文件的 TS 文件：

openJSONFile() {
    let xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            let jsonObj = JSON.parse(this.responseText)
            console.log(jsonObj);
        }
    }

    xmlHttp.open("GET", "../../../../../../../../../common/branch_code_branch_name.json", true);
    xmlHttp.send();
}

branch_code_branch_name.json 的位置：

Answer 1

在 Angular 项目中为此类数据创建Assets文件夹。

assets - 包含要在构建应用程序时按原样复制的图像和其他资产文件。

所有 static 数据，包括您可以包含在此文件夹中的图像/Css 文件/JSON/ 或 JS 文件。

Answer 2

将您的 JSON 文件放置在使用 Angular 开始新项目时为您创建的文件夹Assets中。

理想情况下，在此处放置额外的目录以方便将来使用，即创建一些目录，例如css 、 scss 、 js 、 images 、 json ，甚至是mock-data

然后，将 JSON 文件放在适当标记的json目录中。

引用此文件时，请确保您放置的“../”数量代表您要访问的目录的准确数量。
例如，如果我有一个 ts 文件，它位于：

app->users->services->user-service

它需要在上述位置引用 json 文件，然后我会使用：

'../../../assets/json/nameofmyjsonfile.json'

如果我的 ts 文件再深两层，它看起来像这样：

'../../../../../assets/json/nameofmyjsonfile.json'

此外，您可以查看“相对”引用，以避免许多'../'