adev/src/content/reference/errors/NG05106.md
Angular threw this error because it tried to insert a DOM node next to another node it was tracking, and that node isn't where Angular expects it to be anymore.
Angular keeps track of the DOM nodes it renders so it knows where to insert, move, or remove things later, for example when a @for block re-renders. If something outside Angular changes that part of the DOM (removes a node, moves it somewhere else), Angular's internal record goes stale. The next time it tries to insert next to that node, you get this error instead of a confusing native NotFoundError.
This can happen because of:
ElementRef.nativeElement, document.querySelector, innerHTML, etc.) instead of going through Angular.@for, @if, dynamically created views).The following example triggers the error:
@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();
}
}
The error message tells you which node Angular expected to find, so start there.
@for/@if that reorders or removes content in an unusual way, or a third-party widget embedded on that page.