Angular 4：如何访问本地 json？

Posted 2023-02-22

技术标签:

【中文标题】Angular 4：如何访问本地 json？【英文标题】：Angular4: how do access local json? 【发布时间】：2017-09-02 17:06:22 【问题描述】：

在 Angular2 中，你可以有一个文件夹 /data/ 和一个 json 文件，你可以在 localhost:4200/data/something.json 访问它。

这在 Angular4 中不再可能。

任何想法如何让它工作？

【问题讨论】：

angular4 ???什么是没听说过的 @AurA 看看现在 angular2 是什么***.com/a/43224781/5043867 ;) 酷！感谢您的信息， 【参考方案1】：

我遇到了同样的问题，我的 Observable Angular 服务位于“src/app/”文件夹内，它试图加载本地 JSON 文件。我试图将 JSON 文件放在同一个应用程序文件夹中，在一个新的“api”文件夹中，使用各种亲属/绝对路由，但没有帮助，我得到 404 错误。我把它放在“资产”文件夹中的那一刻，它就起作用了。我想还有更多吗？

也许这个链接有帮助：

COMPONENT-RELATIVE PATHS IN ANGULAR

【讨论】：

我认为 webpack，模块捆绑器，默认情况下会捆绑资产文件夹中的所有内容。这是因为 angular-cli.json 中的 assets 数组中指定的所有内容都被复制并提供服务，因此在运行时可用。见github.com/angular/angular-cli/wiki/stories-asset-configuration【参考方案2】：

您可以在 angular.json 的 Assets 标签下添加文件夹位置

"assets": [
          "src/favicon.ico",
          "src/assets",
          "src/api"
        ],

【讨论】：

【参考方案3】：

基于此post，这里是 Angular 6+ 的完整答案：

来自angular-cli doc，json 可以被视为资产，可以通过标准导入访问，无需使用 ajax 请求。

假设您将 json 文件添加到“your-json-dir”目录中：

将“your-json-dir”添加到 angular.json 文件中 (:

"assets": [ "src/assets", "src/your-json-dir" ]

允许将 json 模块导入到 typings.d.ts 文件中以防止打字稿错误：

declare module "*.json" const value: any; export default value;

在您的控制器/服务/任何其他文件中，只需使用以下相对路径导入文件：

import * as myJson from 'your-json-dir/your-json-file.json';

【讨论】：

【参考方案4】：

当然有可能。假设这里是您的 json 文件

这是您调用 json 的代码

import  Injectable  from '@angular/core';
import  Http, Headers, Response  from '@angular/http';
import  Observable  from 'rxjs';
import 'rxjs/add/operator/map'

@Injectable()
export class YourService 

   constructor(private http: Http)  

   getAdvantageData()
      let apiUrl = './assets/data/api/advantage.json';
      return this.http.get(apiUrl)
      .map( (response: Response) => 
         const data = response.json();
         return data;
      );

【讨论】：

这之后应该在app模块中导入什么模块？ @veerendragupta 我没有完全理解你的问题。请详细说明。【参考方案5】：

你也可以使用“require”；

let test = require('./test.json');

【讨论】：

你能告诉我我们如何在 Angular 项目中使用 ''require' 吗？【参考方案6】：

您可以使用此代码

@Injectable()
export class AppServices

    constructor(private http: Http) 
         var obj;
         this.getJSON().subscribe(data => obj=data, error => console.log(error));
    

    public getJSON(): Observable<any> 
         return this.http.get("./file.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

这里file.json 是您的本地json 文件。

请看这里

How to get a json file in angular2 using the Http class

另见 angular-cli 的 changlog for path

https://github.com/angular/angular-cli/blob/master/CHANGELOG.md#100-rc4-2017-03-20

【讨论】：

这是我以前在 Angular2 中所做的。在 Angular4 中，路由 ./file.json 不再有效。 @DanNeciu 也看到我的更新答案这就是为什么框架很糟糕，所有这些只是为了打开文件，使用与文件系统本身交互的实际代码可能更容易做到这一点 @Preadeep。从 './example.json' 导入 * 作为数据；或者从本地资产订阅 .json 哪个是首选的，如果我们可以直接导入，为什么要订阅？ @Mahi IMO 两者都是在您的项目中访问本地 JSON 数据的不同方式，您可以选择其中一种。 Offcourse 如果我们可以直接访问而不需要 HTTP 调用，那么简单的导入会是一个更好的主意。并且要从 observable 获取数据，我猜你需要订阅，但是是的，你可以从这里省略 .map。【参考方案7】：

我想通了。

在 Angular2 中，我有 src 文件夹下的文件夹。在 Angular4 中，您必须将它放在根文件夹中。

例子：

Angular2：