如何将JSON文件导入TypeScript文件？

Question

我正在使用Angular Maps构建地图应用程序,并希望将JSON文件导入为定义位置的标记列表.我希望在app.component.ts中使用这个JSON文件作为marker []数组.而不是在TypeScript文件中定义硬编码的标记数组.

导入此JSON文件以在我的项目中使用的最佳过程是什么？任何方向都非常感谢!

Answer 1

Aonepathan的单行为我工作,直到最近的打字稿更新.

我找到了Jecelyn Yeen的帖子,建议将此片段发布到您的TS定义文件中

typings.d.ts

然后导入您的数据,如下所示:

import * as data from './example.json';

Answer 2

以下是基于@ryanrain答案的Angular 6+的完整答案:

从angular-cli doc,json可以被视为资产,可以在不使用ajax请求的情况下从标准导入访问.

假设您将json文件添加到"your-json-dir"目录中:

1. 将"your-json-dir"添加到angular.json文件中(:

   "assets": [ "src/assets", "src/your-json-dir" ]

2. 创建或编辑typings.d.ts文件(在您的项目根目录下)并添加以下内容:

   declare module "*.json" { const value: any; export default value; }

   这将允许导入".json"模块而不会出现打字稿错误.

3. 在您的控制器/服务/任何其他文件中,只需使用此相对路径导入文件:

   import * as myJson from 'your-json-dir/your-json-file.json';

Answer 3

感谢输入的人,我能够找到修复,我添加并在app.component.ts文件的顶部定义了json:

var json = require('./[yourFileNameHere].json');

这最终产生了标记,并且是一行简单的代码.

Answer 4

第一个解决方案 - 只需将.json文件的扩展名更改为.ts并添加export default到文件的开头,如下所示:

export default {
   property: value;
}

然后你只需导入文件而无需添加类型,如下所示:

import data from 'data';

第二个解决方案通过HttpClient获取json.

将HttpClient注入到组件中,如下所示:

export class AppComponent  {
  constructor(public http: HttpClient) {}
}

然后使用此代码:

this.http.get('/your.json').subscribe(data => {
  this.results = data;
});

https://angular.io/guide/http

此解决方案明显优于此处提供的其他解决方案 - 如果您的json将更改(它是从单独的文件动态加载,因此您只能修改该文件),它不需要您重建整个应用程序.

Answer 5

从Typescript 2.9 开始，可以简单地添加：

"compilerOptions": {
    "resolveJsonModule": true
}

到tsconfig.json. 此后，使用 json 文件很容易（而且VSCode 中也会有很好的类型推断）：

data.json：

{
    "cases": [
        {
            "foo": "bar"
        }
    ]
}

在您的打字稿文件中：

import { cases } from './data.json';

Answer 6

如本reddit文章所述，在Angular 7之后，您可以将事情简化为以下两个步骤：

1. 添加这些三行compilerOptions在tsconfig.json文件中：

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

2. 导入您的json数据：

import myData from '../assets/data/my-data.json';

就是这样。您现在可以myData在组件/服务中使用。

Answer 7

我已经阅读了一些回复，但它们似乎对我没有用。我正在使用Typescript 2.9.2，Angular 6，并尝试在Jasmine单元测试中导入JSON。这就是我的诀窍。

加：

"resolveJsonModule": true,

至 tsconfig.json

像这样导入：

import * as nameOfJson from 'path/to/file.json';

停止ng test，然后重新开始。

参考：https : //blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports

Answer 8

角 10

您现在应该编辑tsconfig.app.json（注意名称中的“app”）文件。

在那里您会找到compilerOptions，然后只需添加resolveJsonModule: true.

因此，例如，一个全新项目中的文件应如下所示：

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "resolveJsonModule": true
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Answer 9

对于Angular 7+，

1）将文件“ typings.d.ts”添加到项目的根文件夹（例如src / typings.d.ts）：

declare module "*.json" {
    const value: any;
    export default value;
}

2）导入和访问JSON数据：

import * as data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data.default);
    }

}

要么：

import data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data);
    }

}

Answer 10

在angular7中，我只是使用了

let routesObject = require('./routes.json');

我的routes.json文件看起来像这样

{

    "routeEmployeeList":    "employee-list",
    "routeEmployeeDetail":      "employee/:id"
}

您使用访问json项目

routesObject.routeEmployeeList

Answer 11

我也无法导入不同的 file.json 。但我是这样解决的

const swaggerDoc = require('../swagger.json')