Angular 2：在本地 .json 文件中找不到文件答案

【问题标题】：Angular 2: file not found on local .json fileAngular 2：在本地 .json 文件中找不到文件
【发布时间】：2016-09-09 21:17:59
【问题描述】：

我看过一些关于无法找到本地文件来打开它们的不同帖子，无论它们是图像文件还是数据文件，但没有一个解决方案对我有用。我的猜测是我缺少一些配置。

我要查找的文件位于与我的 app.html 和 app.ts 文件处于同一级别的名为“data”的文件夹中。

这是我在 app.html 中的内容，PS 我也在使用 Ionic2：

<ion-menu (click)='getDepartments()' side='right' type='overlay' [content]="content">

在 app.ts 文件中我有：

getDepartments() {
    this.http.get('/data/data.json')
        .map(res => res.json())
        .subscribe(
            data => this.departments = data,
            err => console.log(err),
            () => console.log('Random Quote Complete')
        );
}

我试过了：

./data/data.json

data/data.json

app/data/data.json

和任何其他路径。并且它们都返回 404 file not found 错误。这似乎就像熟悉 Angular 2 带来的痛苦。提前致谢

【问题讨论】：

标签： javascript html file angular ionic2

【解决方案1】：

您的服务器是否能够看到文件夹“/data”？确保您的 JSON 文件与您的公共/静态文件位于同一目录中。

【讨论】：

都是本地的，所以我假设我的“服务器”/计算机可以看到 /data 文件夹。我的项目中没有公共/静态文件目录。

【解决方案2】：

我没有意识到使用 Ionic 会编译 app 文件夹中的所有内容并将其放入 www/build 文件夹。因此，当我在未编译的应用程序文件夹中放置路径时，我没有意识到我放置路径的文件不是我认为的位置。

所以我做了两件事，每件事都奏效了。我将文件直接放在 www 文件中（不要将它们放在构建文件中，因为每次运行 ionic serve 时它们都会被删除），然后相应地修复路径。或者只是修复路径，知道当您在 app.ts 中查找文件时，它需要先退出 www/build。

【讨论】：

【解决方案3】：

以前的答案说直接把它放在www 文件夹中，以使其对应用程序可用。我想说这不是最好的解决方案，因为在新创建的 Ionic2 项目中使用 .gitignore 排除了 www 文件夹。

而是将它放在src/assets 文件夹中，它也将在 App 中可用，并且不会从 git repo 中排除（默认情况下）。然后你可以使用：this.http.get('assets/file.json');

您可以修改 .gitignore 文件，但随后您可能会包含其他不必要的文件。

【讨论】：

在熟悉 angular 2/4 个月后，我发现这个答案是正确的长期解决方案。抱歉，换支票花了这么长时间

【解决方案4】：

对于任何有兴趣解决相同问题的人。如果您使用的是 Angular CLI，并且希望通过 http 访问任何文件夹，如本例中的“数据”文件夹。

转到 Angular-CLI.JSON，然后在应用程序 -> 资产下添加“文件夹名称”，即“数据”

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "data"
      ],

【讨论】：