angular-cli를 사용하면서 느낀점은 webpack으로 프로젝트 세팅했을때처럼 커스텀하기가 힘들지만 대신 사용하기는 무척 편한다. 어차피 내부적으로 webpack을 사용하는 구조이고 cli 툴 형태로 그 사용을 간단하게 만들어준다.

angular 프로젝트를 한다면 angular-cli를 강력히 추천한다. webpack으로 비슷한 세팅을 하려면 손이 정말 많이 가는데 angular-cli가 깔끔하게 잘 정리해주었다.

그런데 심각한 버그가 있었다. 이 버그는 발견되었기 때문에 곧 패치가 되겠지만 혹시라도 나처럼 고생하는 사람이 있을까봐 간단히 공유한다.

AOT build fails

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

간단히 요약하면 aot 옵션을 키고 빌드를 하면 Module not found: Error: Can't resolve './$$_gendir... 이런 오류 메시지가 나오면서 빌드가 실패한다.

처음에는 내 코드의 문제로 인해서 aot 컴파일러에서 익셉션이 발생한줄 알았다. 실제 개발할때는 오류가 발생하지 않더라도 aot 컴파일을 하면 발생하는 오류가 있다.

Resolve

1. node_modules/를 삭제한다.
2. "enhanced-resolve": "3.3.0",를 devDependencies에 추가한다.
3. npm i를 한다.(yarn은 안된다.)

• yarn의 경우 angular-cli 내부 dependency때문에 enhanced-resolve 버전을 강제로 명시해도 3.4버전을 설치한다ㅠㅜ
• 패키지 설치 속도 때문에 yarn을 주로 사용하고 있었는데 패치가 되기 전까지 다시 npm을 사용해야겠다.

Cause

webpack 내부에서 사용하는 enhanced-resolve 3.4+ 모듈에서 발생하는 오류이다. 일단 3.3.0 버전을 사용하면 오류가 발생하지 않는다.

Patch

다행이 angular-cli 1.3.2+ 이상에서 아무런 이슈가 발생하지 않는 것을 확인했다.