Question

我正在尝试以两种方式加载本地JSON文件。

这是我的json文件：

{
  "imgsesion": "fa_closesesion.png",
  "texthome": "volver a la home",
  "logo": "fa_logo.png",
  "menu": {
    "background": "orange",
    "link1": "ESCRITOR",
    "link2": "MÚSICO",
    "link3": "AYUDA ADMIN",
    "submenu": {
      "link1": {
        "text1": "novelas",
        "text2": "obras de teatro"
      },
      "link2": {
        "text1": "compositor",
        "text2": "intérprete"
      }
    }
  }
}

方式1：使用Http

这是我的服务文件（general.service.ts）

  getContentJSON() {
    return this.http.get('assets/json/general.json')
    .map(response => response.json());
  }

这样工作正常，但在Web浏览器控制台中显示下一个错误：

ERROR TypeError: Cannot read property 'menu' of undefined

方式2：使用HttpClient

这是我的服务文件（general.service.ts）

  getContentJSON() {
    return this.httpClient.get("assets/json/general.json");
  }

它不起作用，因为我找不到general.json文件，它通过控制错误，它给我一个错误404

这是组件文件（app.component.ts）

export class AppComponent implements OnInit {
  contentGeneral: any;

ngOnInit() {
this.getContentJSON();
}

  getContentJSON() {
    this.generalService.getContentJSON().subscribe(data => {
      this.contentGeneral = data;
    }, // Bind to view
    err => {
      // Log errors if any
      console.log('error: ', err);
    });
  }

}

这是模板文件（app.component.html）：

<a href="#" routerLink="/home" class="linkHome">{{contentGeneral.texthome}}</a>

<div class="submenu" *ngIf="linkWrite.isActive || isSubMenuWriter">
    <span class="d-block text-right small">{{contentGeneral.menu.submenu.link1.text1}}</span>
    <span class="d-block text-right small">{{contentGeneral.menu.submenu.link1.text2}}</span>
</div>

这是我的实际错误：

在app.component.ts中，我添加了导入：

import * as data_json from './assets/json/general.json';

但是当我启动服务时，它会给我以下错误：

我如何解决它？

Answer 1

最简单的解决方案：

import "myJSON" from "./myJson"

重要更新！

我发现，由于此错误，此方法在最新的Angular版本中停止工作：

src / app / app.weather.service.ts（2,25）中的错误：错误TS2732：找不到模块'./data.json'。考虑使用'--resolveJsonModule'导入带有'.json'扩展名的模块

要使其正常工作，请转到tsconfig.json并在

中添加这两个

compilerOptions（tsconfig.json）：

"resolveJsonModule": true,
"esModuleInterop": true,

更改后，重新运行ng serve。

如果您只使用第一个选项，则可能会出现如下错误：

src / app / app.weather.service.ts（2,8）中的错误：错误TS1192：模块'“.... app / data / data.json”'没有默认导出。

（我在这里找到了这个非常好的答案（https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/））

Answer 2

通过这种方式...

import "file" from "./file.json"

我出现了红线，并且出现了类似角度未找到模块的错误。

经过一些RND，我得到了另一种对我有用的方法。希望它可以帮助某人。

var data = require('src/file.json');
console.log("Json data : ", JSON.stringify(data));

Answer 3

对于 Angular 2，Angular 4和Angular 5 ，您可以使用以下方法将本地.json文件加载到组件。

const data = require('../../data.json');

export class AppComponent  {
    json:any = data;
}

要在组件中使用require，需要通过运行

安装@types/node

npm install @types/node --save-dev

在tsconfig.app.json> compilerOptions下进行以下配置更改

"compilerOptions": {
  "types": ["node"],
  ...
},

在 Angular 6 之后，您可以按以下方式使用直接导入表单文件系统。

import data  from '../../data.json';

export class AppComponent  {
    json:any = data;
}

在tsconfig.app.json> compilerOptions下进行以下配置更改

"compilerOptions": {
  ...
  "resolveJsonModule": true,
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true,
  ...
},

Answer 4

See this article：

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

Answer 5

您可以使用以下代码段：

#  A B C D  R
1  0 1 1 0  0 - for A and D
2  1 1 1 0  1 - for A,B,C
3  1 0 1 0  0 - for B
4  1 1 0 0  0 - for C
5  0 1 1 1  1 - for D

Answer 6

步骤1：打开{}，在tsconfig.json中添加以下几行：

compilerOptions

步骤2：使用以下代码导入json：

"resolveJsonModule": true,
"esModuleInterop": true

注意：该代码已在Angular 9中进行了测试

Answer 7

这是因为您要异步请求JSON文件，可以使用安全导航操作符或使用ngIf来处理，

<div class="submenu" *ngIf="linkWrite.isActive || isSubMenuWriter">
                  <span class="d-block text-right small">{{contentGeneral?.menu?.submenu?.link1?.text1}}</span>
                  <span class="d-block text-right small">{{contentGeneral?.menu?.submenu?.link1?.text2}}</span>
                </div>

或者只是导入组件中的JSON文件并分配sampleJSON。

import "sampleJSON" from "./sampleJSON"

Answer 8

更新后的答案- Angular 5 Service to read local .json file

在 tsconfig.json

中

"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,

Answer 9

创建.ts文件，然后在其中复制json文件的内容并添加

export const <objectName> =

类似的东西

export const faceProfilesSample =
[
{
  "id": 1,
  "depth": 0,
  "burden": null
},
{
  "id": 1,
  "depth": 1.97,
  "burden": 8.58
},

然后您可以使用带有这样的导入语句的objectName来访问它

import { faceProfilesSample } from "@app/model/face-profiles-sample";

无需更改tsconfig.json

Angular 6 - 从本地加载JSON

9 个答案: