From 3a468813ca793a2e702eed382adbe6648b2fdd68 Mon Sep 17 00:00:00 2001 From: AleksanderBodurri Date: Fri, 13 May 2022 00:25:20 -0400 Subject: [PATCH] fix(devtools): stop relying on `getAllAngularRootElements` in Angular DevTools' backend code. (#45983) With the introduction of standalone components, it is no longer guaranteed that getAllAngularRootElements will be available on the global object. This PR removes the dependency on this function so that DevTools can continue to work for Angular applications that use `bootstrapApplication`. PR Close #45983 --- .../ng-devtools-backend/src/lib/angular-check.spec.ts | 11 +++++------ .../ng-devtools-backend/src/lib/angular-check.ts | 3 ++- .../projects/shell-browser/src/app/ng-validate.ts | 3 +-- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/devtools/projects/ng-devtools-backend/src/lib/angular-check.spec.ts b/devtools/projects/ng-devtools-backend/src/lib/angular-check.spec.ts index 156b070df17..a861ebf42ec 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/angular-check.spec.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/angular-check.spec.ts @@ -68,13 +68,12 @@ describe('angular-check', () => { }); it('should recognize Ivy apps', () => { - (window as any).getAllAngularRootElements = (): Element[] => { - const el = document.createElement('div'); - (el as any).__ngContext__ = 0; - return [el]; - }; + const el = document.createElement('div'); + el.setAttribute('ng-version', '0.0.0-PLACEHOLDER'); + (el as any).__ngContext__ = 0; + document.body.append(el); expect(appIsAngularIvy()).toBeTrue(); - delete (window as any).getAllAngularRootElements; + el.remove(); }); }); diff --git a/devtools/projects/ng-devtools-backend/src/lib/angular-check.ts b/devtools/projects/ng-devtools-backend/src/lib/angular-check.ts index 1190bc384bd..f7857bbc868 100644 --- a/devtools/projects/ng-devtools-backend/src/lib/angular-check.ts +++ b/devtools/projects/ng-devtools-backend/src/lib/angular-check.ts @@ -13,7 +13,8 @@ export const appIsAngularInDevMode = (): boolean => { }; export const appIsAngularIvy = (): boolean => { - return typeof (window as any).getAllAngularRootElements?.()?.[0]?.__ngContext__ !== 'undefined'; + const rootElement = (window as any).document.querySelector('[ng-version]'); + return typeof rootElement?.__ngContext__ !== 'undefined'; }; export const appIsAngular = (): boolean => { diff --git a/devtools/projects/shell-browser/src/app/ng-validate.ts b/devtools/projects/shell-browser/src/app/ng-validate.ts index a9cf38d6830..b869ffe0342 100644 --- a/devtools/projects/shell-browser/src/app/ng-validate.ts +++ b/devtools/projects/shell-browser/src/app/ng-validate.ts @@ -46,8 +46,7 @@ function detectAngular(win: Window): void { { // Needs to be inline because we're stringifying // this function and executing it with eval. - isIvy: typeof (window as any).getAllAngularRootElements?.()?.[0]?.__ngContext__ !== - 'undefined', + isIvy: typeof (ngVersionElement as any)?.__ngContext__ !== 'undefined', isAngular, isDebugMode, isSupportedAngularVersion,