How to find what template is causing an error when the error and trace don't say?

Question

I'm getting the typical NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. error. The issue is, the error was caused by code written by someone else a while ago, and I have no idea what component/template is causing the error.

If I look at the stack trace, there is no mention of a specific component or template; only frames of internal Angular stuff:

Subject.js:34 ERROR RuntimeError: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe? Find more at https://angular.io/errors/NG02200
    at NgForOf.ngDoCheck (common.mjs:3117:31)
    at callHookInternal (core.mjs:4024:14)
    at callHook (core.mjs:4055:9)
    at callHooks (core.mjs:4006:17)
    at executeInitAndCheckHooks (core.mjs:3956:9)
    at refreshView (core.mjs:13513:21)
    at detectChangesInView (core.mjs:13663:9)
    at detectChangesInEmbeddedViews (core.mjs:13606:13)
    at refreshView (core.mjs:13522:9)
    at detectChangesInView (core.mjs:13663:9)

If I set an exception breakpoint to catch it in the act, I get a longer trace, but it still only show internal frames:

find (core.mjs:30705)
ngDoCheck (common.mjs:3109)
callHookInternal (core.mjs:4024)
callHook (core.mjs:4055)
callHooks (core.mjs:4006)
executeInitAndCheckHooks (core.mjs:3956)
refreshView (core.mjs:13513)
detectChangesInView (core.mjs:13663)
detectChangesInEmbeddedViews (core.mjs:13606)
refreshView (core.mjs:13522)
detectChangesInView (core.mjs:13663)
detectChangesInComponent (core.mjs:13638)
detectChangesInChildComponents (core.mjs:13676)
refreshView (core.mjs:13548)
detectChangesInView (core.mjs:13663)
detectChangesInEmbeddedViews (core.mjs:13606)
refreshView (core.mjs:13522)
detectChangesInView (core.mjs:13663)
detectChangesInEmbeddedViews (core.mjs:13606)
refreshView (core.mjs:13522)
detectChangesInView (core.mjs:13663)
detectChangesInComponent (core.mjs:13638)
detectChangesInChildComponents (core.mjs:13676)
refreshView (core.mjs:13548)
detectChangesInView (core.mjs:13663)
detectChangesInComponent (core.mjs:13638)
detectChangesInChildComponents (core.mjs:13676)
refreshView (core.mjs:13548)
detectChangesInView (core.mjs:13663)
detectChangesInComponent (core.mjs:13638)
detectChangesInChildComponents (core.mjs:13676)
refreshView (core.mjs:13548)
detectChangesInView (core.mjs:13663)
detectChangesInEmbeddedViews (core.mjs:13606)
refreshView (core.mjs:13522)
detectChangesInView (core.mjs:13663)
detectChangesInEmbeddedViews (core.mjs:13606)
refreshView (core.mjs:13522)
detectChangesInView (core.mjs:13663)
detectChangesInComponent (core.mjs:13638)
detectChangesInChildComponents (core.mjs:13676)
refreshView (core.mjs:13548)
detectChangesInternal (core.mjs:13437)
detectChanges (core.mjs:13954)
tick (core.mjs:28735)
(anonymous) (core.mjs:28895)
invoke (zone.js:368)
onInvoke (core.mjs:11083)
invoke (zone.js:367)
run (zone.js:129)
run (core.mjs:10934)
next (core.mjs:28894)
next (Subscriber.js:91)
_next (Subscriber.js:60)
next (Subscriber.js:31)
(anonymous) (Subject.js:34)
errorContext (errorContext.js:19)
next (Subject.js:27)
emit (core.mjs:10670)
checkStable (core.mjs:11002)
onHasTask (core.mjs:11100)
hasTask (zone.js:422)
_updateTaskCount (zone.js:443)
_updateTaskCount (zone.js:272)
runTask (zone.js:190)
drainMicroTaskQueue (zone.js:581)
invokeTask (zone.js:487)
invokeTask (zone.js:1631)
globalCallback (zone.js:1674)
globalZoneAwareCallback (zone.js:1695)

I have gone through most of these frame looking for a mention of a component name or a fragment of a template, and I can't find anything that looks relevant. There are massive arrays called hostLView that hold a ton of Angular-specific data, but all the mentioned Injectors and Modules are at best used by many components in the app. I've found references to a grandparent component, but that doesn't narrow it down by much.

I tried searching for *ngFor in all the suspect child components, and actually fixed one related issue that hadn't popped up yet, but that didn't fix the main problem.

What debugging techniques can I use to find what component is at fault, or at least get a hint to narrow down my search?

Carcigenicate · Accepted Answer · 2025-07-15 14:33:32Z

I figured it out right before I was about to give up and post. It ended up being more straightforward than I thought, but still might be of use to someone.

To debug this, I followed these steps:

Set an exception breakpoint in the devtools while on a different page than the one that caused the error.
Navigated to the page with the error.
When the breakpoint triggered, ngDoCheck was shown almost at the top of the trace, as you can see in the question.
I clicked ngDoCheck in the trace in the sidebar in the Sources tab to open its context.
In the Local context, there was this: NgForOf. I clicked that, then opened up its _viewContainer, and then the _hostLView inside of that object.
In my case, the offending code was shown at _hostLView[0]. When I clicked that element in Chrome, Chrome opened it in the Elements tab, and then I just had to look at what component that line of HTML was a part of by checking the parent elements.

Hopefully they fix the trace in the future to contain some indicator of what component caused the issue, but until then, this should work.

Collectives™ on Stack Overflow

How to find what template is causing an error when the error and trace don't say?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related