삽입 기준 노드를 찾을 수 없음

Angular가 추적하던 노드 옆에 DOM 노드를 삽입하려 했지만 해당 노드가 더 이상 예상 위치에 없어 이 오류가 발생했습니다.

Angular는 나중에 노드를 삽입, 이동, 제거할 위치를 알 수 있도록 렌더링한 DOM 노드를 추적합니다. 예를 들어 @for 블록을 다시 렌더링할 때 이 정보를 사용합니다. Angular 외부에서 해당 DOM 영역의 노드를 제거하거나 다른 곳으로 옮기면 내부 기록이 실제 상태와 달라집니다. 이후 그 노드 옆에 삽입하려 하면 혼란스러운 네이티브 NotFoundError 대신 이 오류가 발생합니다.

다음과 같은 원인이 있을 수 있습니다.

• Angular를 통하지 않고 DOM에 직접 접근하는 애플리케이션 코드(ElementRef.nativeElement, document.querySelector, innerHTML 등).
• 번역 도구, 문법 검사기, 비밀번호 관리자처럼 페이지를 변경하는 브라우저 확장 프로그램.
• 뷰의 순서를 바꾸거나 조건부로 렌더링하는 Angular 자체 코드의 예외적인 상황(@for, @if, 동적으로 생성한 뷰).

다음 예제는 이 오류를 발생시킵니다.

@Component({
  selector: 'app-example',
  template: `@if (show) {
    <span>{{ text }}</span>
  }`,
})
export class Example {
  show = true;
  text = 'hello';
  hostElement = inject(ElementRef).nativeElement;

  ngAfterViewInit() {
    // Removing this node behind Angular's back is what causes the error.
    this.hostElement.querySelector('span').remove();
  }
}

오류 디버깅하기

오류 메시지에 Angular가 찾으려던 노드가 표시되므로 여기서 시작하세요.

• 이 컴포넌트나 부모 컴포넌트에서 Angular API 대신 DOM에 직접 접근하는 코드를 찾아 Angular API를 사용하도록 변경하세요.
• 일부 사용자에게만 발생하거나 확장 프로그램이 설치된 로컬 환경에서 재현된다면 확장 프로그램을 끈 시크릿 창에서 시도하세요.
• 여러 사용자에게 같은 라우팅 규칙에서 일관되게 발생한다면 사용자마다 다른 확장 프로그램이 원인일 가능성은 낮습니다. 대신 특이한 방식으로 콘텐츠 순서를 바꾸거나 제거하는 @for/@if, 페이지에 삽입된 서드 파티 위젯 등 해당 페이지에서 일정하게 발생하는 원인을 찾아보세요.
• 위 내용으로 설명되지 않는다면 재현 예제와 함께 이슈를 등록해 주세요.