Angular 6 - 加载本地 JSON To load a JSON file from the local system in Angular 6, you can use the HttpClient module provided by Angular. First, import the HttpClient module in your component or service: ```typescript import { HttpClient } from '@angular/c
Angular 6 - 加载本地 JSON To load a JSON file from the local system in Angular 6, you can use the HttpClient module provided by Angular. First, import the HttpClient module in your component or service: ```typescript import { HttpClient } from '@angular/c
我正在尝试以两种方式加载本地的JSON文件。
这是我的JSON文件：
{
"imgsesion": "fa_closesesion.png",
"texthome": "返回主页",
"logo": "fa_logo.png",
"menu": {
"background": "橙色",
"link1": "作家",
"link2": "音乐家",
"link3": "管理员帮助",
"submenu": {
"link1": {
"text1": "小说",
"text2": "剧本"
},
"link2": {
"text1": "作曲家",
"text2": "演奏家"
}
}
}
}
- 方式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）：
{{contentGeneral.texthome}} {{contentGeneral.menu.submenu.link1.text1}} {{contentGeneral.menu.submenu.link1.text2}}
这是我的实际错误：
在app.component.ts中，我添加了导入语句：
import * as data_json from './assets/json/general.json';
但当我运行ng serve时，它给我以下错误：
我该如何解决这个问题？
在Angular 6之前的版本中，可以使用以下方法将本地的.json文件加载到组件中：
const data = require('../../data.json');
export class AppComponent {
json:any = data;
}
在组件中使用`require`之前，需要通过运行`npm install /node --save-dev`来安装`/node`。
在`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,
...
},
以上就是解决使用Angular加载本地JSON文件的问题的原因和解决方法。
问题的出现原因是在使用import "file" from "./file.json"的方式加载本地的JSON文件时，出现了模块找不到的错误。通过一些研究和调查，找到了另一种可以解决这个问题的方式。
解决方法是使用var data = require('src/file.json');来加载JSON文件，并通过console.log("Json data : ", JSON.stringify(data));来输出JSON数据。在这个解决方法中，还指出了应该使用JSON.stringify(data)而不是JSON.stringify(dta)，因为这个是一个笔误错误。
作者感谢这个方法对自己有用，并且提到这个方法可以帮助其他人。作者还提到他在使用require的时候遇到了一个错误，错误信息为"Typescript : require statement not part of an import statement"，并通过将解决方案改为import data = require('your_file.json')来解决了这个问题。同时，作者也在文章中提到了在Angular中使用require需要考虑以下几点，并给出了一个相关的链接供读者参考。
这篇文章通过作者的经验分享了在Angular 6中加载本地JSON文件时可能遇到的问题以及解决方法，为读者提供了有用的信息和参考链接。
Angular 6 - 从本地加载JSON文件的问题出现的原因是因为最新的Angular版本中，使用import语句导入JSON文件会报错。解决方法是在tsconfig.json文件中的compilerOptions中添加以下两个配置项："resolveJsonModule": true 和 "esModuleInterop": true。修改后，重新运行ng serve命令即可。
如果只使用第一个解决方法，可能会出现"Module '....app/data/data.json'没有默认导出"的错误。
另外，还有一种解决方法是使用import * as json from './assets/json/general.json'来导入JSON文件，但在Angular 6中可能不再需要创建typings.d.ts文件。
在app.component.ts中使用import语句导入JSON文件时，可能会出现路径错误的问题，此时需要检查tsint.json文件的规则。
在Angular 6中添加typings.d.ts文件的重要注意事项可以参考stackoverflow上的回答。需要在tsconfig.json文件的typeRoots中添加自定义类型文件的路径。
据称，esModuleInterop不再需要在Angular 6中使用。
在有限的测试中，使用这种方法可能无法实现JSON文件的互换。
以上是解决Angular 6中从本地加载JSON文件的问题的原因和解决方法。