iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular error NG05106 means Angular tried to insert a DOM node beside a reference node it expected to find, but that node was no longer where Angular expected. The usual starting point is the node named in the error: trace what changed it, then check for app code, browser extensions, or rendering behavior that could have made Angular’s DOM tracking stale.
What NG05106 means
Angular tracks the DOM nodes it renders so it can insert, move, and remove them as the application changes. NG05106 occurs when Angular cannot find an insertion reference node where it expects it. A direct DOM change can leave Angular’s internal record out of sync with the actual page. Angular’s NG05106 documentation advises starting with the node named in the error message.
What can cause the missing reference node?
The error identifies a mismatch, not the exact cause. Angular lists several possibilities:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →- Application code changes the DOM directly. Code that removes or moves a node Angular manages can invalidate Angular’s tracking.
- A browser extension changes page content. Translation tools, grammar checkers, and password managers may alter the DOM.
- A rendering edge case occurs. Reordered or conditionally rendered views, including
@forand@if, may be involved.
These are diagnostic possibilities, not proof that any one of them caused a particular failure.
#1 Best Overall
How to troubleshoot NG05106
- Find the reference node. Read the full error and begin with the node Angular says it expected to find.
- Inspect the component and its parent. Look for direct DOM operations such as
ElementRef.nativeElement,document.querySelector, or assignments toinnerHTML. Check whether the code removes or moves an Angular-managed node. Where possible, use Angular APIs instead of changing Angular-managed DOM behind Angular’s back. - Test for extension interference. If the issue affects only some users or happens when a particular extension is installed, retry in an incognito window with extensions disabled. If the error disappears, re-enable extensions individually to identify a possible trigger.
- Check repeatable rendering and embedded widgets. If the same route fails consistently for multiple users, inspect changes involving
@foror@ifand any third-party widgets embedded on the page. Determine whether their DOM changes conflict with Angular’s rendering. - Prepare a minimal reproduction if the cause remains unclear. Reduce the failure to the smallest component and steps that reproduce it, then file an issue with Angular. The Angular Error Encyclopedia provides the official error reference.
Why direct DOM removal can trigger the error
Angular’s documentation demonstrates the failure with a component that uses an @if block, obtains its native host element through ElementRef, and removes the rendered span in ngAfterViewInit. That removal changes the DOM outside Angular’s normal rendering flow. If Angular later tries to insert a node relative to the removed reference, it cannot find the node it was tracking.
When investigating a similar component, look for the code that performs the removal or move and for any later render that relies on the affected view. The key question is whether another part of the application or an external tool changes a node Angular still expects to manage.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
