소개

Angular 앱을 개발하고 있다면 한 번은 다음 오류에 직면 한 적이 있습니까?

파란색 사각형으로 둘러싸인 곳을 보면 ChunkLoadError: Loading chunk 14 failed. 로 표시됩니다.

이 오류 메시지는 소위 Chunk 오류입니다.
만약 지금까지 이 에러 메세지를 본 적이 있어, 대응에 곤란하고 있는 등 있으면 참고가 될지도 모릅니다.

Chunk 오류란 무엇이며 왜 일어나는가?

Angular 공식 문서 에 알기 쉬운 설명이 있었으므로 당겨 왔습니다.

이 파일의 무결성은 지연 읽기 모듈의 경우 특히 중요합니다. JS 번들은 많은 지연 청크를 참조하지만 지연 청크의 파일 이름은 응용 프로그램의 특정 빌드에 고유합니다. 실행 중인 버전 X의 응용 프로그램은 지연 청크를 로드하려고 하지만 서버에서 버전 X+1로 이미 업데이트된 경우 지연 로드 작업이 실패합니다.

위의 내용을 쭉 그림으로 해 보았습니다.
그림에서 버전 A 앱에서 서버 버전 B 지연 청크를 로드하려고 하면 오류가 발생하는 다이어그램입니다.
기본적으로 Chunk 오류는 앱을 다시 시작하거나 브라우저를 다시로드하여 해결할 수 있습니다.

대처법

Chunk 에러의 개요를 알았는데, 그럼 어떻게 하면 좋은가를 생각해 보겠습니다.
위에서 언급했지만 앱을 다시 시작(재로드)하면 해결됩니다.

여기 의 사이트를 참고로 하면, 리로드의 어프로치를 걸기 위해서 글로벌하게 Hook 할 수 있는 핸들러를 준비하고 있습니다.

  handleError(error: any): void {
   const chunkFailedMessage = /Loading chunk [\d]+ failed/;

    if (chunkFailedMessage.test(err.message)) {
      window.location.reload();
    }
  }

시도한 느낌이라면 chunkFailedMessage는 일률적인 copipe로 좋으며 그 후의 대응은 응용 프로그램에 따라 달라질 것이라고 생각합니다. (위의 예라면 브라우저를 다시로드하는 것 같습니다.)

끝에

이상이 엉망인 Chunk 에러의 설명과 대처법이 됩니다.
처음에는 이 에러는 무엇이 일어나고 있다고 당황합니다만, 어떤 경위에서 발생하고 있는지를 이해할 수 있으면 대응도 검토하기 쉽네요.

그럼 또.

참고

Angular 공식 문서
Angular Lazy Routes & loading chunk failed