Component tree shows incorrect order of elements

[rajinder-yadav]

DevTools shows all 3 anchor links correctly, however Component Tree display the last anchor at the bottom, this should be at the top.

Looking at the template code, we have:

@Component({
  selector: 'app-parks',
  template: `
  <h1>National Parks</h1>
  <img src="../../assets/camera.svg" width="20" height="20"> 
  <a [routerLink]="{outlets: { parkit: ['park1']}}" routerLinkActive="active">Park 1</a>
  <a [routerLink]="{outlets: { parkit: ['park2']}}" routerLinkActive="active">Park 2</a>
  <a [routerLink]="{outlets: { parkit: ['park3']}}" routerLinkActive="active">Park 3</a>
  <router-outlet name="parkit"></router-outlet>
  `,
  styles: [`
    a.active {
      background-color: yellow;
    }
  `]
})