Question

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

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

Answer 1

Aonepathan的一行代表正在为我工作，直到最近的抄本更新。

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

将文件typings.d.ts添加到项目的根文件夹中，其中包含以下内容

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

然后导入您的数据：

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

Answer 2

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

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

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

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

"assets": [ "src/assets", "src/your-json-dir" ]
在您的项目根目录下创建或编辑Types.d.ts文件并添加以下内容：

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

这将允许导入“ .json”模块而不会出现打字稿错误。
在控制器/服务/其他任何文件中，只需使用以下相对路径导入文件即可：

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

对于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 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

在angular7中，我只是使用

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

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

{

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

您使用

访问json项

routesObject.routeEmployeeList

Answer 8

从Typescript 2.9起，只需添加：

"compilerOptions": {
    "resolveJsonModule": true
}

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

data.json：

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

在您的Typescript文件中：

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

Answer 9

角度10

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

您将在其中找到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 10

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

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

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

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

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

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

导入您的json数据：

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

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

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

12 个答案: