Angular 6 - 从本地加载JSON

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"

重要更新!

我发现,由于这个错误,这个metod停止在最新的Angular版本中工作:

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

要使它工作,请转到tsconfig.json和这两个,在compilerOptions中:

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

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

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

For the Angular 2, Angular 4 and Angular 5, you can use following method to load your local .json files to the component.

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

export class AppComponent  {
    json:any = data;
}

要require在您的组件中使用with，您需要@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,
  ...
},