[Angular] 앵귤러로 로컬 json 파일 읽기

✔사용한 앵귤러 버전

Angular: 12.2.11
rxjs: 6.6.7
typescript:4.3.5

✅ json 파일을 준비합니다.

📁todo.json

[
   {"id" : 1, "content" : "HTML", "completed" : false},
   {"id" : 2, "content" : "CSS", "completed" : false},
   {"id" : 3, "content" : "JavaScript", "completed" : false}
]

✅ 컴포넌트로 import 합니다.

📁src/app/app.component.ts

import { Component } from '@angular/core';
import   todoData  from '../assets/todo.json';

@Component({
  selector: 'app-root',
  template:   `
  <h2>title</h2>
  <p> *앵귤러로 json 파일 읽기 </p>
  <p>{{ todos | json  }}</p>
  ` 
})
export class AppComponent {
  title = 'local-json';
  todos:any = todoData;
}

파이프를 사용해서 json 형태로 보여주기로 했습니다.

✅tsconfig.json 파일을 수정합니다.

  "compilerOptions": {
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports":true,
    ...

esModuleInterop : 기본적으로 false거나 설정 되어있지 않습니다. 모듈 방식을 섞어서 쓸 때 사용하는 옵션입니다.

allowSyntheticDefaultImports : 기본적으로 false거나 설정 되어있지 않습니다. true로 활성화 해주면 import로 파일 가져오기가 가능합니다.

resolveJsonModule : 기본적으로 false거나 설정 되어있지 않습니다. 타입스크립트는 json파일을 확인하는 것을 지원하지 않습니다. 이 옵션을 true로 활성화 하거나 추가할 시에 json 파일을 가져오고 확인할 수 있습니다.

✨결과물

로컬json 파일을 앵귤러로 읽어온 결과물입니다.

📌옵션참고링크
📌esModuleInterop 에 대해 더 자세히 설명한 블로그

---

allowSyntheticDefaultImports 옵션이나 esModuleInterop 옵션을 사용하지 않았을 때는 json파일을 import하는 부분에서 에러가 발생하였는데, allowSyntheticDefaultImports 옵션이나 esModuleInterop 옵션 둘 중 하나만 설정해도 컴파일이 정상적으로 작동하는 것을 확인할 수 있었습니다.

모듈차이에 관련된 것 같은데 모듈도 그렇고 옵션의 사용방법을 정확하게 파악하지 못해서 참고링크를 더 봐야겠습니다.🥲