NgZone으로 실행되지 않거나 멈춤현상이 일어나는 현상 해결

angular에서 Router로 다른 경로의 페이지로 이동할 때 이동하고 나서 컴포넌트가 생성이되다가 멈추는 현상이 발생하는 경우가 발생했다.

특히 찾다보니 외부 라이브러리를 가져다 쓰는 경우에 앵귤러에서 제대로 감지하지 못하는 경우가 발생하기 때문인 것 같아 보인다. 이런 현상은 꼭 Router로 인한 것 만은 아니고 여러 경우가 있는 것 같다.

당시 현상은 컴포넌트가 생성이 되다가 멈춰서 ui가 그려지다 말아서 그런지 깨져서 보이고 또한 컴포넌트를 조금씩 클릭하거나 변화를 주려고 하면 다시 생성을 멈춘게 작동을 해서 다시 컴포넌트가 생성이 되긴했다.

이 때 NgZone을 의존성 주입받아서 Router.navigate 함수를 NgZone.run 함수로 감싸 실행해서 해결 했다.

NgZone은 앵귤러 안에서 일어나는 변화 감지(Change Detection)하고 그 변화를 적용하기 위한 것이다.(앵귤러 자체 Zones를 NgZone이라고 따로 가지고 있다)

비동기로 발생하는 변경들을 감지하는 중에 멈춤현상이 일어날 수 있는 문제가 발생한 것 같고 그걸 제대로 감지할 수 있도록 ngzone이 처리를 해준 것같다.

this.NgZone.run(() => {
      this.Router.navigate(['/main']);
    });

go