Angular 6-从本地加载JSON [英] Angular 6 - Load JSON from local

问题描述

我正在尝试通过两种方式加载本地JSONfile.

I am trying to load a local JSONfile of two ways.

这是我的json文件:

This is my json file:

{
  "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)

This is my service file (general.service.ts)

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

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

This way working ok, but shows the next error in the web browser console:

ERROR TypeError: Cannot read property 'menu' of undefined

• 方法2:使用HttpClient

这是我的服务文件(general.service.ts)

This is my service file (general.service.ts)

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

它不起作用，因为我找不到general.json文件，它经历了错误的控制，并给我一个错误404

It does not work because I can not find the general.json file, it goes through the control of the error and it gives me an error 404

这是组件文件(app.component.ts)

This is the component file (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中，添加导入:

In app.component.ts, I add the import:

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

但是当我启动ng服务时，会出现以下错误:

But when I launch ng serve it gives me the following error:

我该如何解决?

推荐答案

最简单的解决方案:

import "myJSON" from "./myJson"

重要更新！

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

I found, that this method stops working in newest Angular versions, because of this error:

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

ERROR in src/app/app.weather.service.ts(2,25): error TS2732: Cannot find module './data.json'. Consider using '--resolveJsonModule' to import module with '.json' extension

要使其正常运行，请转到tsconfig.json并在其中添加这两个

To make it works, go to the tsconfig.json and add this two, inside

compilerOptions(tsconfig.json):

compilerOptions( tsconfig.json ) :

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

更改后，重新运行ng serve.

如果仅使用第一个选项，则会出现如下错误:

If you only use the first option, you can get an error like this:

src/app/app.weather.service.ts(2,8)中的错误:错误TS1192:模块'".... app/data/data.json"'没有默认导出.

ERROR in src/app/app.weather.service.ts(2,8): error TS1192: Module '"....app/data/data.json"' has no default export.

(我在这里找到了很好的答案(

(I found this very good answer here (https://www.angularjswiki.com/angular/how-to-read-local-json-files-in-angular/))

这篇关于Angular 6-从本地加载JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！