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

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

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

直到最近的打字稿更新之前，Aonepathan的单行代码都为我工作。

我发现Jecelyn Yeen的帖子建议将该代码段发布到您的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. resolveJsonModule在tsconfig.json文件中添加以下行支持：

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

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

import data from './example.json';

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

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

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

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

2. 导入您的json数据：

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

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

这是基于@ryanrain答案的Angular 6+的完整答案：

从angular-cli doc中，可以将json视为资产，可以通过标准导入访问json，而无需使用ajax请求。

假设您将json文件添加到“ your-json-dir”目录中：

1. 将“ your-json-dir”添加到angular.json文件中（：

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

2. 在您的项目根目录下创建或编辑Types.d.ts文件，并添加以下内容：

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

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

3. 在控制器/服务/其他任何文件中，只需使用以下相对路径导入文件：

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

感谢您的投入，我能够找到此修复程序，我在app.component.ts文件顶部添加并定义了json：

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

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

第一个解决方案-只需将.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会更改（它从一个单独的文件动态加载，因此您只能修改该文件），则不需要重建整个应用程序。

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

对于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);
    }

}

在angular7中，我只是使用了

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

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

{

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

您使用访问json项目

routesObject.routeEmployeeList

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

"compilerOptions": {
    "resolveJsonModule": true
}

到tsconfig.json。此后，它很容易使用JSON文件（并会出现在VSCode不错的类型推断，太）：

data.json：

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

在您的打字稿文件中：

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

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

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

角度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"
  ]
}