Angular 2:在本地.json文件上找不到文件

Angular 2: file not found on local .json file

本文关键字：文件 json 找不到 Angular      更新时间：2023-09-26

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

我要查找的文件位于名为"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

以及任何其他路径。它们都返回一个404文件未找到错误。这看起来就像是熟悉Angular 2的成长之痛。提前感谢

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

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

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

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

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

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

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

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

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

相关文章：