Angular9 production build fail 이슈 처리

 

프로젝트를 진행하면서 production 빌드를 해야할 때가 있었는데, 아래와 같은 빌드 이슈가 발생했다.

 

 

 

이슈

> ng build admin-client --prod 

 

 

Terser 에서 발생한 "RangeError: Maximum call stack size exceeded" 라는 에러 메세지를 구글링해본 결과, 찾은 해결 방법은 세 가지 정도 되었다.

 

- node_modules 폴더를 삭제하고 다시 npm을 설치할 것.

> node_modules 뿐만 아니라 package-lock.json 파일도 함께 삭제해주는 것이 좋다.

 

- Angular CLI 버전을 9.0.2 이하로 다운그레이드 할 것.

> 이미 내 Angular CLI 버전이 9.0.1로 해당 사항이 없음.

 

- terser 버전을 최신 버전으로 할 것

 

 

 

 

그렇게해서 정리한 해결 방법은 아래와 같다.

 

 

 

 

해결방법

1. 프로젝트 내 node_modules 폴더 삭제

2. package-lock.json 파일 삭제

3. npm cache clean --f (npm 클린)

4. npm install

5. npm i terser@latest (terser 최신버전으로 업데이트)

6. ng build admin-client --prod 실행

> 만약 "ERROR in The Angular Compiler requires TypeScript >=3.6.4 and <3.8.0 but 3.8.3 was found instead." 에러가 발생하면, "npm install typescript@3.7.5" 로 typescript 버전 다운그레이드 후 다시 6번 실행.

 

 

 

build 실행결과를 보면, 아래 WARNING이 2개 뜨는 것을 볼 수 있는데, 이는 angular.json에서 정한 budget 크기를 넘는 모듈이 있어서 뜨는 것이다. 

angular.json

angular.json에서 해당 프로젝트의 budgets 설정 값을 보면, 2MB가 넘는 파일은 warning이, 5mb가 넘는 파일은 error가 발생하도록 되어있다. 이를 해결하기 위해서 webpack-bundle-analyzer를 설치해서 크기에 비해 사용량이 적은 모듈을 확인해서 수정하는 것이 좋다. 

 

 

webpack-bundle-analyzer 설치 및 사용방법

1. analyzer 설치

> npm i webpack-bundle-analyzer --save-dev

 

2. build

> dev build의 경우 : ng build 프로젝트명 --statsJson=true

> production build의 경우 : ng build 프로젝트명--prod --statsJson=true

 

3. analyzer 실행

> npx webpack-bundle-analyzer dist/apps/프로젝트명/stats-es2015.json

> stats.json에 대한 경로인 "dist/apps/프로젝트명/stats-es2015.json" 는 프로젝트별로 다를 수 있으니 각자 프로젝트에 맞게 수정하면 된다.

 

webpack-bundle-anaylzer에 대한 자세한 사용 방법은 아래 링크에 자세히 설명되어 있다.

https://ui.toast.com/weekly-pick/ko_20190603/

웹팩으로 Vue.JS 번들 크기를 줄이는 방법

 

 

 

 

 

이슈 해결에 도움이 된 링크

https://github.com/angular/angular-cli/issues/17061

Angular 9 Production Build Fails during Optimization Phase (terser out of memory) · Issue #17061 · angular/angular-cli