Angular 4：如何访问本地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文件。

也见到这里

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

也看到了路径的角度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！有效。我想还有更多......

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

COMPONENT-RELATIVE PATHS IN ANGULAR

Answer 4

你也可以使用“require”;

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

Answer 5

基于这个post，这里是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"
        ],