Question

I have seen a few different posts about not being able to find local files to open them up whether they be images or data files, but none of the solutions have worked for me. My guess would be there is some configuration I'm missing.

The file I'm looking for is in a folder named "data" on the same level as my app.html and app.ts files.

Here is what I have in app.html, PS I'm also using Ionic2:

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

and in the app.ts file I have:

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')
        );
}

I've tried:

./data/data.json

data/data.json

app/data/data.json

and any other path. And they all return a 404 file not found error. This seems just like growing pains with getting familiar with Angular 2. Thanks in advance

Answer 1

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

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

进行访问

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

Answer 2

我没有意识到与Ionic一起工作，它会编译app文件夹中的所有内容并将其放入www / build文件夹中。因此，当我在未编译的应用程序文件夹中放置路径时，我没有意识到我将路径放在的文件中并不是我想象的那样。

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

Answer 3

任何有兴趣解决同一问题的人。如果您使用的是Angular CLI，并且希望通过http访问任何文件夹，就像本例“data”文件夹一样。

转到Angular-CLI.JSON，然后在apps下添加“文件夹名称”，即“数据” - ＆gt;资产

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

Answer 4

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

Angular 2: file not found on local .json file

4 个答案: