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

Question

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

导入此 JSON 文件以用于我的项目的最佳流程是什么？任何方向都非常感谢！

Answer 1

在最近的打字稿更新之前，Aonepathan 的单行字一直为我工作。

我发现 Jecelyn Yeen 的 post 建议将此 sn-p 发布到您的 TS 定义文件中

将文件typings.d.ts添加到项目的根文件夹，内容如下

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

然后像这样导入您的数据：

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

2019 年 7 月更新：

Typescript 2.9 (docs) 引入了更好、更智能的解决方案。步骤：

1. 在您的tsconfig.json 文件中使用此行添加resolveJsonModule 支持：

"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

import 语句现在可以假定默认导出：

import data from './example.json';

intellisense 现在将检查 json 文件以查看您是否可以使用 Array 等方法。很酷。

Answer 2

如this reddit post 中所述，在 Angular 7 之后，您可以将事情简化为这两个步骤：

1. 将这三行添加到您的compilerOptions 文件中的tsconfig.json：

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

1. 导入您的 json 数据：

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

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

Answer 3

这是基于@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 4

感谢输入的家伙，我能够找到修复，我添加并定义了 app.component.ts 文件顶部的 json：

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

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

Answer 5

第一个解决方案 - 只需将 .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 6

我已经阅读了一些回复，但它们似乎对我不起作用。我正在使用 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 7

截至Typescript 2.9，只需添加：

"compilerOptions": {
    "resolveJsonModule": true
}

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

data.json:

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

在您的 Typescript 文件中：

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

Answer 8

Angular 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

let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);

var handleJSONFile = function (err, data) {
   if (err) {
      throw err;
   }
   markers= JSON.parse(data);
 }

Answer 12

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

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