Angular4：如何访问本地json？

Question

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

Angular4中不再可能这样。

任何想法如何让它工作？

Answer 1

你可以使用这段代码

@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文件。

也见到这里

• 如何使用Http类在angular2中获取json文件

也看到了路径的角度cli的变化

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

Answer 2

当然可能。 我们假设这是你的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;
      });
   }  
}

Answer 3

我遇到了同样的问题，我的Observable Angular服务位于'src / app /'文件夹内，它正在尝试加载本地JSON文件。 我试图将JSON文件放在同一个app文件夹中，在一个新的'api'文件夹中，使用各种亲戚/绝对路由，但它没有帮助，我得到404错误。 我把它放在'assets'文件夹里的那一刻...... BAM！ 有效。 我想还有更多......

可能是这个链接有帮助......

角点的成分相对路径

Answer 4

你也可以使用“require”;

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

Answer 5

基于这篇文章 ，这里是Angular 6+的完整答案：

从angular-cli doc ，json可以被视为资产，并且可以在不使用ajax请求的情况下从标准导入访问。

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

1. 将“your-json-dir”添加到angular.json文件中（：

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

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

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

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

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

Answer 6

我想到了。

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

例：

Angular2：

root / src / data / file.json

Angular4：

root / data / file.json

Answer 7

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

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