[英]Import JSON in Angular 7 project
In my Angular project I'm importing JSON files for my own little localization service.在我的 Angular 项目中,我正在为我自己的小型本地化服务导入 JSON 文件。 I'm usingthe method suggested here , updating my typings.d.ts
to我正在使用这里建议的方法,将我的typings.d.ts
更新为
declare module "*.json" {
const value: any;
export default value;
}
This worked fine for Angular 6, but after the update to Angular 7 my imports seem to be undefined when I try to access a property.这适用于 Angular 6,但在更新到 Angular 7 之后,当我尝试访问属性时,我的导入似乎未定义。
import * as de from './strings/de.json';
import * as en from './strings/en.json';
var s = en["mykey"]
The JSON has a very simple key => value structure: JSON 有一个非常简单的键 => 值结构:
{
"myKey": "My Headline",
…
}
What has changed between 6.1 & 7 that could lead to this behaviour? 6.1 和 7 之间发生了什么变化可能导致这种行为?
Turns out with Angular 7 & TypeScript 3.1 there actually have been some changes (I guess they have been there since TS 2.9+?).事实证明,Angular 7 和 TypeScript 3.1 实际上已经发生了一些变化(我猜它们从 TS 2.9+ 开始就已经存在了?)。 Using the code in the question, all values are wrapped inside a 'default'-object.使用问题中的代码,所有值都包含在“默认”对象中。 To prevent this I had to simplify the import statements:为了防止这种情况,我必须简化导入语句:
import de from './strings/de.json';
import en from './strings/en.json';
Also see this question for more details on how to import JSON files in TypeScript. 另请参阅此问题以获取有关如何在 TypeScript 中导入 JSON 文件的更多详细信息。
After a lot of digging and trail and error, I finally got my app to import JSON correctly in Angular 7:经过大量的挖掘、跟踪和错误,我终于让我的应用程序在 Angular 7 中正确导入了 JSON:
Firstly, remove首先,删除
"resolveJsonModule": true "esModuleInterop": true
from tsconfig.json , if you have that in there from other non-Angular 7 specific answers.来自tsconfig.json ,如果您有其他非 Angular 7 特定答案的内容。
Create src/typings.d.ts :创建src/typings.d.ts :
declare module "*.json" { const value: any; export default value; }
Update typeRoots
in tsconfig.json to use src/typings.d.ts , eg:更新typeRoots
中的typeRoots以使用src/typings.d.ts ,例如:
"typeRoots": [ "node_modules/@types", "src/typings.d.ts" ],
Import JSON:导入 JSON:
import data from './data.json'; console.log(data);
In Angular 7 I had to take these steps:在 Angular 7 中,我必须采取以下步骤:
(1) imports (1) 进口
import pkg from '../../package.json'
(2) tsconfig.json (2) tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"resolveJsonModule": true,
AND more compiler options here
}
}
(3) angular.json (to stop ng lint breaking on JSON imports) (3) angular.json(阻止 JSON 导入时 ng lint 损坏)
The only change here is to add ... "**/*.json"
这里唯一的变化是添加... "**/*.json"
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**",
"**/*.json"
]
}
}
I was looking for a solution that would work without me tinkering with the angular.json file我正在寻找一种无需我修改 angular.json 文件即可工作的解决方案
I solved it by exporting my JSON as a .ts constant:我通过将我的 JSON 导出为 .ts 常量来解决它:
export const TEST_DATA = {...};
and then import it to my components然后将其导入到我的组件中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.