DebugElement.queryAll can return results in different order than DOM.

[jjstreet]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
DebugElements are returned from DebugElement.queryAll() in the same order they were first created in the ViewContainer regardless if they were moved by a structural directive like NgFor. If they were moved, then the order is out of sync with with the DOM.

Expected behavior
DebugElements should be returned from a query in the order they appear within the DOM. Order should be updated when underlying ViewRefs are moved around in a ViewContainer

Minimal reproduction of the problem with instructions
Plunker Reproducing the Issue

Running plunker will run tests that are almost identical to the unit tests for NgFor. Tests illustrate how adding and removing ViewRefs from a ViewContainer work as expected. Two tests illustrate how moving ViewRefs and using DebugElement to query for the moved items fails. Two tests illustrate how the DOM is in the correct order by using the native querySelectorAll() method.

What is the motivation / use case for changing the behavior?
DebugElements should be returned in the order they appear in the DOM when queried for.

Please tell us about your environment:
Windows 10 x64

• Angular version: 2.2.1 with angular-cli 1.0.0-beta.20-4 (plunker not at this version)

• Browser: all

• Language: Typescript

• Node (for AoT issues): node --version = 7.1.0

[fawind]

I have the same issue using angular 2.2.1.

They are also in the wrong order when using the DebugElement.children property.

[jjstreet]

I believe it may have to do with the following line:
https://github.com/angular/angular/blob/master/modules/%40angular/core/src/debug/debug_node.ts#L165

Map of debug nodes to element nodes is kept but may not be updated if nodes are moved around.

[victornoel]

@vikerman any news on that? I don't know why but since I upgraded from 4.1.3 to 4.3.6, this bug now appears…

[jshoudy11]

This is affecting my project as well. Is it being worked on?

[juliemr]

The place to fix this is probably

angular/packages/core/src/view/services.ts

Line 634 in b0befd7

class DebugRenderer2 implements Renderer2 {

, although I admit I haven't kept up with the renderer changes.

[amitpchigadani]

Has anyone found a solution for this?

[jshoudy11]

No clean solution but I found a workaround. Something like:

const debugEls = element.queryAll('foo');
const domEls = Array.from(element.nativeElement.querySelectorAll(selector));
debugEls.sort((a: DebugElement, b: DebugElement) => {
return domEls.indexOf(a.nativeElement) - domEls.indexOf(b.nativeElement);
});
return debugEls;

[amitpchigadani]

Yes, Thanks @jshoudy11 , We can verify our view template directly by fetching DOM elements instead of DebugElements. That's a nice alternative as of now. Hope this issue resolves sooner.