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

Program / 글쓴이

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

}