Làm cách nào để nhập tệp JSON vào tệp TypeScript?

Tôi đang xây dựng một ứng dụng bản đồ bằng Angular Maps và muốn nhập tệp JSON dưới dạng danh sách các điểm đánh dấu xác định vị trí. Tôi hy vọng sử dụng tệp JSON này làm mảng đánh dấu [] bên trong app.component.ts. Thay vì xác định một mảng đánh dấu được mã hóa cứng bên trong tệp TypeScript.

Quy trình tốt nhất để nhập tệp JSON này để sử dụng trong dự án của tôi là gì? Bất kỳ hướng đánh giá rất cao!

Aonepathan's one-liner đã làm việc cho tôi cho đến khi có bản cập nhật sắp chữ gần đây.

Tôi tìm thấy bài đăng của Jecelyn Yeen đề xuất đăng đoạn mã này vào tệp Định nghĩa TS của bạn

thêm tệp typings.d.tsvào thư mục gốc của dự án với nội dung bên dưới

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

và sau đó nhập dữ liệu của bạn như sau:

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

cập nhật tháng 7 năm 2019:

Typecript 2.9 ( docs ) đã giới thiệu một giải pháp tốt hơn, thông minh hơn. Các bước:

1. Thêm resolveJsonModulehỗ trợ bằng dòng này trong tsconfig.jsontệp của bạn :

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

câu lệnh nhập bây giờ có thể giả sử xuất mặc định:

import data from './example.json';

và intellisense bây giờ sẽ kiểm tra tệp json để xem liệu bạn có thể sử dụng các phương thức Array v.v. tuyệt đấy.

Như đã nêu trong bài đăng reddit này , sau Angular 7, bạn có thể đơn giản hóa mọi thứ theo 2 bước sau:

1. Thêm ba dòng đó compilerOptionsvào tsconfig.jsontệp của bạn :

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

2. Nhập dữ liệu json của bạn:

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

Và đó là nó. Bây giờ bạn có thể sử dụng myDatatrong các thành phần / dịch vụ của mình.

Đây là câu trả lời đầy đủ cho Angular 6+ dựa trên câu trả lời @ryanrain:

Từ tài liệu angle-cli , json có thể được coi là tài sản và được truy cập từ nhập tiêu chuẩn mà không cần sử dụng yêu cầu ajax.

Giả sử bạn thêm tệp json của mình vào thư mục "your-json-dir":

1. thêm "your-json-dir" vào tệp angle.json (:

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

2. tạo hoặc chỉnh sửa tệp typings.d.ts (tại gốc dự án của bạn) và thêm nội dung sau:

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

   Điều này sẽ cho phép nhập các mô-đun ".json" mà không có lỗi sắp chữ.

3. trong tệp bộ điều khiển / dịch vụ / bất kỳ thứ gì khác của bạn, chỉ cần nhập tệp bằng cách sử dụng đường dẫn tương đối này:

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

Cảm ơn những người đã đóng góp ý kiến, tôi đã có thể tìm thấy bản sửa lỗi, tôi đã thêm và xác định json trên đầu tệp app.component.ts:

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

Điều này cuối cùng đã tạo ra các điểm đánh dấu và là một dòng mã đơn giản.

Giải pháp đầu tiên - chỉ cần thay đổi phần mở rộng của tệp .json của bạn thành .ts và thêm export defaultvào đầu tệp, như sau:

export default {
   property: value;
}

Sau đó, bạn có thể chỉ cần nhập tệp mà không cần thêm kiểu chữ, như sau:

import data from 'data';

Giải pháp thứ hai lấy json thông qua HttpClient.

Chèn HttpClient vào thành phần của bạn, như sau:

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

và sau đó sử dụng mã này:

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

https://angular.io/guide/http

Giải pháp này có một điểm vượt trội so với các giải pháp khác được cung cấp ở đây - nó không yêu cầu bạn phải xây dựng lại toàn bộ ứng dụng nếu json của bạn thay đổi (nó được tải động từ một tệp riêng biệt, vì vậy bạn chỉ có thể sửa đổi tệp đó).

Tôi đã đọc một số câu trả lời và chúng dường như không hiệu quả với tôi. Tôi đang sử dụng Typecript 2.9.2, Angular 6 và cố gắng nhập JSON trong Kiểm tra đơn vị Jasmine. Đây là những gì đã làm lừa cho tôi.

Thêm vào:

"resolveJsonModule": true,

Đến tsconfig.json

Nhập như:

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

Dừng lại ng test, bắt đầu lại.

Tham khảo: https://blogs.msdn.microsoft.com/typescript/2018/05/31/annocting-typescript-2-9/#json-imports

Đối với Angular 7+,

1) thêm tệp "typings.d.ts" vào thư mục gốc của dự án (ví dụ: src / typings.d.ts):

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

2) nhập và truy cập dữ liệu JSON:

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

}

hoặc là:

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

}

Trong angle7, tôi chỉ đơn giản sử dụng

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

Tệp route.json của tôi trông giống như thế này

{

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

Bạn truy cập các mục json bằng cách sử dụng

routesObject.routeEmployeeList

Kể từ Typecript 2.9 , người ta có thể chỉ cần thêm:

"compilerOptions": {
    "resolveJsonModule": true
}

đến tsconfig.json. Sau đó, thật dễ dàng để sử dụng tệp json ( và cũng sẽ có suy luận kiểu tốt trong VSCode):

data.json:

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

Trong tệp tệp Typecript của bạn:

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

Góc 10

Thay vào đó, bạn nên chỉnh sửa tệp tsconfig.app.json(lưu ý "ứng dụng" trong tên).

Ở đó, bạn sẽ tìm thấy compilerOptionsvà bạn chỉ cần thêm resolveJsonModule: true.

Vì vậy, ví dụ: tệp trong một dự án hoàn toàn mới sẽ trông như thế này:

/* 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"
  ]
}