mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
5be80d33a3
Previously, Angular devtools would mistakenly traverse the same DOM elements multiple times while doing traversal for the component tree explorer. This error case would occur when more than 1 Angular application root component was present on the same page and in distinct DOM branches. Some example cases that did work previously: ```html <app-root> ... </app-root> ``` ```html <app-root> ... <app-root-2></app-root-2> ... </app-root> ``` An example of where it would enter the irregular behaviour ```html <app-root> ... </app-root> <app-root-2> ... </app-root-2> ``` Now, we properly ignore duplicate DOM paths when looking for application and non-application root component to begin the Angular DevTools component discovery logic. PR Close #62719
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.dev/license
|
|
*/
|
|
|
|
import {Component, inject} from '@angular/core';
|
|
import {Router, RouterOutlet} from '@angular/router';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
templateUrl: './app.component.html',
|
|
styleUrls: ['./app.component.scss'],
|
|
imports: [RouterOutlet],
|
|
})
|
|
export class AppComponent {
|
|
readonly router = inject(Router);
|
|
}
|
|
|
|
@Component({
|
|
selector: 'empty-component',
|
|
template: ``,
|
|
})
|
|
export class EmptyComponent {
|
|
// This component is just for demonstration purposes.
|
|
// used to test Angular DevTools traversal logic when multiple applications are present.
|
|
}
|
|
|
|
@Component({
|
|
selector: 'other-app',
|
|
template: `
|
|
@defer {
|
|
<empty-component/>
|
|
}
|
|
@placeholder (minimum 2s) {
|
|
<b>Stuff will be loaded here</b>
|
|
}
|
|
`,
|
|
imports: [EmptyComponent],
|
|
})
|
|
export class OtherAppComponent {
|
|
// This component is just for demonstration purposes.
|
|
// used to test Angular DevTools traversal logic when multiple applications are present.
|
|
}
|