Angular에서 브라우저 Cache 문제 해결

Angular로 개발 후 Deploy 하다보면 브러우저 Cache가 남아 있어서 변경된 부분이 적용되지 않는 문제가 발생하였다.
구글링 해서 찾아 보니 빌드시에 몇가지 꼼수를 쓰면 해결 되었다.

1. package.json 파일 수정
- {빌더 폴더}에 index.html이 존재하는 폴더 위치를 적는다. 아래 부분을 scripts 안의 아래쪽에 추가한다.

"scripts": {
    ...
    
    "deploy_dev": "ng build --configuration=development --aot=true --output-hashing=all --extract-css=true && npm run add_date",
    "deploy_prd": "ng build --configuration=production && npm run add_date",
    "add_date": "npm run add_date_js && npm run add_date_css && npm run rm_bak_files",
    "add_date_js": "for i in dist/{빌드 폴더}/*; do if [ -f $i ]; then LC_ALL=C sed -i.bak 's:js\":js?'$(date +%H%M%m%d%y)'\":g' $i; fi done",
    "add_date_css": "sed -i.bak 's:css\":css?'$(date +%H%M%m%d%y)'\":g' dist/{빌드 폴더}/index.html",
    "rm_bak_files": "find dist/{빌드 폴더} -name '*.bak' -exec rm -Rf {} \\;"
    
  },

2. 빌드 실행
- 일반적으로 터미널에서 ng build .... 을 실행하였지만 npm 의 script를 실행하여 빌드 한다.

npm run-script dev_prd
또는
npm run-script deploy_prd

3. 설명 
- 이전에 사용하는 방식이었는데 스크립트화 시켜 사용한다. js 와 css 참조하는 문법에 "?현재날짜시간"를 추가하여 브라우저가 새로운 파일로 인식하도록 코드에 자동으로 찾아서 수정해 주는 것이다.