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

Question

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

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

这是我在 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

和任何其他路径。他们都是 return 404 文件未找到错误。这似乎就像成长的烦恼一样熟悉 Angular 2. 在此先感谢

Answer 1

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

Answer 2

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

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

Answer 3

之前的回答都说直接放在www文件夹下，让app可以使用。我会说这不是最好的解决方案，因为在新创建的 Ionic2 项目中使用 .gitignore 排除了 www 文件夹。

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

您可以修改 .gitignore 文件，但这样您可能会包含其他不需要的文件。

Answer 4

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

转到 Angular-CLI.JSON 然后添加 "the folder name" 这是 "data" 在 apps -> assets

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

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

Angular 2: file not found on local .json file

html

javascript

file

ionic2

angular