JSON 파일을 TypeScript 파일로 가져 오는 방법은 무엇입니까?

Angular Maps를 사용하여지도 애플리케이션을 구축 중이며 JSON 파일을 위치를 정의하는 마커 목록으로 가져오고 싶습니다. 이 JSON 파일을 app.component.ts 내부의 marker [] 배열로 사용하고 싶습니다. TypeScript 파일 내에 하드 코딩 된 마커 배열을 정의하는 대신.

내 프로젝트에서 사용하기 위해이 JSON 파일을 가져 오는 가장 좋은 프로세스는 무엇입니까? 어떤 방향으로도 대단히 감사합니다!

Aonepathan의 one-liner는 최근 typescript 업데이트까지 나를 위해 일했습니다.

이 스 니펫을 TS 정의 파일에 게시 할 것을 제안하는 Jecelyn Yeen의 게시물 을 찾았습니다.

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+에 대한 완전한 답변은 다음과 같습니다.

에서 각-CLI 문서 , JSON은 자산으로 간주 될 수 있으며 아약스 요청을 사용하지 않고 표준 수입에서 액세스.

"your-json-dir"디렉토리에 json 파일을 추가한다고 가정 해 보겠습니다.

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

   그러면 typescript 오류없이 ".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 Unit Test에서 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');

내 route.json 파일은 다음과 같습니다.

{

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

다음을 사용하여 json 항목에 액세스합니다.

routesObject.routeEmployeeList

현재 타이프 2.9 , 하나는 간단하게 추가 할 수 있습니다 :

"compilerOptions": {
    "resolveJsonModule": true
}

에 tsconfig.json. 그 후에는 json 파일을 사용하기 쉽습니다 ( 그리고 VSCode에서도 좋은 유형 추론이있을 것입니다).

data.json:

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

Typescript 파일에서 :

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( "앱" 대신 파일 (이름 에 합니다.

거기에서를 찾을 수 있으며 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"
  ]
}