[Angular 2+] Can't resolve './app.module.ngfactory' 오류

개발환경
 - JHipster 4.13.1 (Spring Boot + Angular 5)





문제

 - Prod (AOT) 빌드 시 아래와 같은 에러가 발생한다.
  (yarn serve | ng serve 와 같은 명령어는 에러가 발생하지 않는다.)
1004lucifer
1. 일반 빌드
 (node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config webpack/webpack.prod.js --progress --profile)

ERROR in ./src/main/webapp/app/app.main.ts
Module not found: Error: Can't resolve './app.module.ngfactory' in 'C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app'
 @ ./src/main/webapp/app/app.main.ts 2:0-62

2. 디버그 모드 빌드
 (node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config webpack/webpack.prod.js --progress --profile --debug --verbose)

ERROR in ./src/main/webapp/app/app.main.ts
Module not found: Error: Can't resolve './app.module.ngfactory' in 'C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app'
resolve './app.module.ngfactory' in 'C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app'
  using description file: C:\Users\1004lucifer\IdeaProjects\project\package.json (relative path: ./src/main/webapp/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\Users\1004lucifer\IdeaProjects\project\package.json (relative path: ./src/main/webapp/app)
    using description file: C:\Users\1004lucifer\IdeaProjects\project\package.json (relative path: ./src/main/webapp/app/app.module.ngfactory)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app\app.module.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app\app.module.ngfactory.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app\app.module.ngfactory.js doesn't exist
      as directory
        C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app\app.module.ngfactory doesn't exist
[C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app\app.module.ngfactory]
[C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app\app.module.ngfactory.ts]
[C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app\app.module.ngfactory.js]
[C:\Users\1004lucifer\IdeaProjects\project\src\main\webapp\app\app.module.ngfactory]
 @ ./src/main/webapp/app/app.main.ts 2:0-62

원인

 - 사용하지 않는 Component 또는 파일이 있는경우 ngfactory Error 가 발생할 수 있다.








해결방법
1004lucifer
 - 사용하지 않는 Component를 찾아 삭제 후 빌드하니 정상적으로 작동했다.







PS.
어떤 Component가 사용하지 않는지 찾는게 정말 힘들었는데..

나의 경우에는 아래와 같이 git checkout HEAD~[_NUM_] 명령어를 이용해 정상적으로 빌드가 되었던 상황을 찾아 추가/삭제된 파일을 비교하여 찾았다.

1. git checkout HEAD~1
2. yarn build
3. git checkout HEAD~1
4. yarn build
5. ...



아래의 참고 링크에도 나와있듯이 이런 경우에는 warning 을 기대했는데..
이렇게 에러가 나면서 빌드가 되지 않는것은 이해하기 힘들다.

(게다가 어느파일이 사용되지 않는지 알려주지 않아 디버깅 하기가 너무 힘들다.
며칠동안 이것저것 시도를 해봤는데 결국에 문제의 파일을 찾을 수 있게 로그를 나오게 하는 방법은 알 수 없었다.)



참고
 - https://github.com/angular/angular-cli/issues/3636
 - https://github.com/angular/angular/issues/13590