找不到插入參照節點

Angular 拋出此錯誤，是因為它嘗試把一個 DOM 節點插入到它正在追蹤的另一個節點旁邊，而該節點已經不在 Angular 預期的位置了。

Angular 會追蹤它渲染的 DOM 節點，以便知道之後要在哪裡插入、移動或移除項目，例如 @for 區塊重新渲染時。如果 Angular 之外的東西改變了該部分的 DOM（移除節點、把節點移到別處），Angular 的內部紀錄就會過時。下次它嘗試在該節點旁邊插入時，你就會看到此錯誤，而不是令人困惑的原生 NotFoundError。

可能的原因包括：

• 應用程式程式碼直接碰觸 DOM（ElementRef.nativeElement、document.querySelector、innerHTML 等），而不是透過 Angular 操作。
• 瀏覽器擴充功能干擾頁面，例如翻譯工具、文法檢查工具或密碼管理工具。
• 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 預期找到哪個節點，請從該處著手。

• 找出此元件（或父元件）中直接碰觸 DOM 而非使用 Angular API 的程式碼，並改為使用 Angular API。
• 如果此錯誤只出現在某些使用者身上，或你在本機安裝了擴充功能時可以重現，請改用已停用擴充功能的無痕視窗試試。
• 如果它在同一條路由上對許多不同使用者穩定發生，那大概不是擴充功能造成的（擴充功能因使用者而異），請改找該頁面中具確定性的因素，例如以不尋常方式重新排序或移除內容的 @for/@if，或嵌入該頁面的第三方小工具。
• 如果以上都無法解釋，請附上重現方式提出 issue。