如何將JSON文件導入TypeScript文件?




angular google-maps (7)

我正在使用Angular Maps構建地圖應用程序,並希望將JSON文件導入為定義位置的標記列表。 我希望在app.component.ts中使用這個JSON文件作為marker []數組。 而不是在TypeScript文件中定義硬編碼的標記數組。

導入此JSON文件以在我的項目中使用的最佳過程是什麼? 任何方向都非常感謝!


Aonepathan的單行為我工作,直到最近的打字稿更新。

我找到了Jecelyn Yeen的 post ,建議將此片段發佈到您的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等方法。 很酷。


以下是基於@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';


對於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);
    }

}

Typescript 2.9開始 ,可以簡單地添加:

"compilerOptions": {
    "resolveJsonModule": true
}

tsconfig.json 。 此後,使用json文件很容易(VSCode中也會有很好的類型推斷):

data.json

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

在您的Typescript文件中:

import { cases } from './data.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-importshttps://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports


正如在 reddit帖子中所述 ,在Angular 7之後,您可以簡化以下兩個步驟:

  1. 將這三行添加到 tsconfig.json 文件中的 tsconfig.json
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
  1. 導入您的json數據:
import myData from '../assets/data/my-data.json';

就是這樣。 您現在可以在組件/服務中使用 myData


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

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




maps