Angular error NG05106 means Angular tried to insert a DOM node beside a reference node it tracks, but that reference node was no longer where Angular expected it. Start with the node named in the error, then check whether application code, a browser extension, or rendering behavior changed the DOM outside Angular’s expectations.
What NG05106 means
Angular keeps track of the DOM nodes it renders so it can insert, move, and remove them. NG05106 occurs when Angular cannot find the reference node it expected during an insertion. The error identifies the node Angular expected to find; use that detail to focus your investigation. See Angular’s NG05106 documentation.
As an Amazon Associate I earn from qualifying purchases.
Common causes
Application code changes Angular-managed DOM
Code that removes or moves a node directly can leave Angular’s internal view of the DOM out of sync. Look for direct DOM access in the failing component and its parent, including ElementRef.nativeElement, document.querySelector, or assignments to innerHTML. Prefer Angular APIs for changes to content Angular manages.
Angular’s documented example demonstrates the problem with an @if block: a component obtains its native host element through ElementRef and removes the rendered span in ngAfterViewInit. Angular still expects the node to exist, so a later insertion can fail.
#1 Best Overall
A browser extension changes the page
Translation tools, grammar checkers, password managers, and other extensions may modify page content. If the error affects only some users or appears only when an extension is enabled, extension interference is a plausible cause—not proof of one.
Rendering or embedded-widget behavior
Angular identifies edge cases involving reordered or conditionally rendered views, including @for and @if. Third-party widgets embedded on a page are another area to investigate if the failure is reproducible on a route. These are diagnostic possibilities; the error alone does not establish which one is responsible.
Quick Recap
Rank #3
How to troubleshoot NG05106
- Start with the named node. Read the error message and identify the reference node Angular expected to find.
- Inspect the component and its parent. Search for direct DOM manipulation, including
ElementRef.nativeElement,document.querySelector, andinnerHTML. Check whether any code removes or moves a node Angular rendered; use Angular APIs where possible. - Test without extensions. If the issue is limited to certain users or environments, try reproducing it in an incognito window with extensions disabled. If that changes the result, re-enable extensions selectively to narrow down the cause.
- Check repeatable rendering changes. If the same route fails consistently, inspect unusual
@forreordering,@ifconditions, and third-party widgets that may alter the page. - Prepare a minimal reproduction. If these checks do not explain the error, reduce the failing case and report it through Angular’s issue process. The Angular Error Encyclopedia provides the official error reference.
How to tell which cause is more likely
- One user or one browser: investigate browser extensions and other environment-specific page modifications.
- A consistent failure on one route: inspect that route’s view changes, DOM-manipulating application code, and embedded widgets.
- A failure after a particular interaction: trace what the component and its parent do to the rendered node before Angular attempts the insertion.
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.
