refactor(multiple): remove declare global usages (#32991)

Removes all our usages of `declare global`, because they appear to cause breakages with some recent tooling updates.

Author: crisbeto

docs/src/app/shared/analytics/analytics.ts

@@ -11,16 +11,6 @@ import {Injectable} from '@angular/core';
 import {environment} from '../../../environments/environment';
 import {formatErrorEventForAnalytics} from './format-error';
 
-/** Extension of `Window` with potential Google Analytics fields. */
-declare global {
-  interface Window {
-    dataLayer?: any[];
-    gtag?(...args: any[]): void;
-    /** Legacy Universal Analytics `analytics.js` field. */
-    ga?(...args: any[]): void;
-  }
-}
-
 /**
  * Google Analytics Service - captures app behaviors and sends them to Google Analytics.
  *
@@ -34,6 +24,13 @@ declare global {
 @Injectable({providedIn: 'root'})
 export class AnalyticsService {
   private _previousUrl: string | undefined;
+  private _gaWindow = window as Window &
+    typeof globalThis & {
+      dataLayer?: any[];
+      gtag?(...args: any[]): void;
+      /** Legacy Universal Analytics `analytics.js` field. */
+      ga?(...args: any[]): void;
+    };
 
   constructor() {
     this._installGlobalSiteTag();
@@ -71,34 +68,31 @@ export class AnalyticsService {
   }
 
   private _legacyGa(...args: any[]) {
-    if (window.ga) {
-      window.ga(...args);
-    }
+    this._gaWindow.ga?.(...args);
   }
 
   private _gtag(...args: any[]) {
-    if (window.gtag) {
-      window.gtag(...args);
-    }
+    this._gaWindow.gtag?.(...args);
   }
 
   private _installGlobalSiteTag() {
+    const gaWindow = this._gaWindow;
     const url = `https://www.googletagmanager.com/gtag/js?id=${environment.googleAnalyticsMaterialId}`;
 
     // Note: This cannot be an arrow function as `gtag.js` expects an actual `Arguments`
     // instance with e.g. `callee` to be set. Do not attempt to change this and keep this
     // as much as possible in sync with the tracking code snippet suggested by the Google
     // Analytics 4 web UI under `Data Streams`.
-    window.dataLayer = window.dataLayer || [];
-    window.gtag = function () {
-      window.dataLayer?.push(arguments);
+    gaWindow.dataLayer = gaWindow.dataLayer || [];
+    gaWindow.gtag = function () {
+      gaWindow.dataLayer?.push(arguments);
     };
-    window.gtag('js', new Date());
+    gaWindow.gtag('js', new Date());
 
     // Configure properties before loading the script. This is necessary to avoid
     // loading multiple instances of the gtag JS scripts.
-    window.gtag('config', environment.googleAnalyticsOverallDomainId);
-    window.gtag('config', environment.googleAnalyticsMaterialId);
+    gaWindow.gtag('config', environment.googleAnalyticsOverallDomainId);
+    gaWindow.gtag('config', environment.googleAnalyticsMaterialId);
 
     // skip `gtag` for Protractor e2e tests.
     if (window.name.includes('NG_DEFER_BOOTSTRAP')) {

src/cdk/testing/selenium-webdriver/selenium-web-driver-harness-environment.ts

@@ -18,8 +18,8 @@ declare interface FrameworkStabilizer {
   (callback: (didWork: boolean) => void): void;
 }
 
-declare global {
-  interface Window {
+type WindowWithStabiliziers = Window &
+  typeof globalThis & {
     /**
      * These hooks are exposed by Angular to register a callback for when the application is stable
      * (no more pending tasks).
@@ -28,8 +28,7 @@ declare global {
      *  angular/angular/blob/main/packages/platform-browser/src/browser/testability.ts#L30-L49
      */
     frameworkStabilizers: FrameworkStabilizer[];
-  }
-}
+  };
 
 /** Options to configure the environment. */
 export interface WebDriverHarnessEnvironmentOptions {
@@ -48,17 +47,19 @@ const defaultEnvironmentOptions: WebDriverHarnessEnvironmentOptions = {
  * and invokes the specified `callback` when the application is stable (no more pending tasks).
  */
 function whenStable(callback: (didWork: boolean[]) => void): void {
-  Promise.all(window.frameworkStabilizers.map(stabilizer => new Promise(stabilizer))).then(
-    callback,
-  );
+  Promise.all(
+    (window as WindowWithStabiliziers).frameworkStabilizers.map(
+      stabilizer => new Promise(stabilizer),
+    ),
+  ).then(callback);
 }
 
 /**
  * This function is meant to be executed in the browser. It checks whether the Angular framework has
  * bootstrapped yet.
  */
 function isBootstrapped() {
-  return !!window.frameworkStabilizers;
+  return !!(window as WindowWithStabiliziers).frameworkStabilizers;
 }
 
 /** Waits for angular to be ready after the page load. */

src/material-experimental/column-resize/column-resize.spec.ts

@@ -351,27 +351,12 @@ class ElementDataSource extends DataSource<PeriodicElement> {
 }
 
 // There's 1px of variance between different browsers in terms of positioning.
-const approximateMatcher: jasmine.CustomMatcherFactories = {
-  isApproximately: () => ({
-    compare: (actual: number, expected: number) => {
-      const result = {
-        pass: false,
-        message: `Expected ${actual} to be within 1 of ${expected}`,
-      };
-
-      result.pass = actual === expected || actual === expected + 1 || actual === expected - 1;
-
-      return result;
-    },
-  }),
-};
-
-interface NumberMatchers extends jasmine.Matchers<number> {
-  isApproximately(expected: number): void;
-  not: NumberMatchers;
-}
-declare global {
-  function expect(actual: number): NumberMatchers;
+function expectApproximate(actual: number, expected: number, shouldBeApproximate = true) {
+  expect(actual === expected || actual === expected + 1 || actual === expected - 1)
+    .withContext(
+      `Expected ${actual}${shouldBeApproximate ? '' : ' not'} to be within 1 of ${expected}`,
+    )
+    .toBe(shouldBeApproximate);
 }
 
 const testCases = [
@@ -391,7 +376,6 @@ describe('Material Popover Edit', () => {
       let fixture: ComponentFixture<BaseTestComponent>;
 
       beforeEach(fakeAsync(() => {
-        jasmine.addMatchers(approximateMatcher);
         fixture = TestBed.createComponent(componentClass);
         component = fixture.componentInstance;
         fixture.detectChanges();
@@ -415,8 +399,8 @@ describe('Material Popover Edit', () => {
           component.getOverlayThumbElement(2).classList.contains('mat-column-resize-overlay-thumb'),
         ).toBe(true);
 
-        expect(component.getOverlayThumbElement(0).offsetHeight).isApproximately(headerRowHeight);
-        expect(component.getOverlayThumbElement(2).offsetHeight).isApproximately(headerRowHeight);
+        expectApproximate(component.getOverlayThumbElement(0).offsetHeight, headerRowHeight);
+        expectApproximate(component.getOverlayThumbElement(2).offsetHeight, headerRowHeight);
 
         component.beginColumnResizeWithMouse(0);
 
@@ -427,11 +411,9 @@ describe('Material Popover Edit', () => {
           component.getOverlayThumbElement(2).classList.contains('mat-column-resize-overlay-thumb'),
         ).toBe(true);
 
-        expect(component.getOverlayThumbElement(0).offsetHeight).isApproximately(tableHeight);
-        expect(component.getOverlayThumbTopElement(0).offsetHeight).isApproximately(
-          headerRowHeight,
-        );
-        expect(component.getOverlayThumbElement(2).offsetHeight).isApproximately(headerRowHeight);
+        expectApproximate(component.getOverlayThumbElement(0).offsetHeight, tableHeight);
+        expectApproximate(component.getOverlayThumbTopElement(0).offsetHeight, headerRowHeight);
+        expectApproximate(component.getOverlayThumbElement(2).offsetHeight, headerRowHeight);
 
         component.completeResizeWithMouseInProgress(0);
         component.endHoverState();
@@ -462,31 +444,31 @@ describe('Material Popover Edit', () => {
         let columnPositionDelta = component.getColumnOriginPosition(1) - initialColumnPosition;
         // let nextColumnPositionDelta =
         //   component.getColumnOriginPosition(2) - initialNextColumnPosition;
-        expect(thumbPositionDelta).isApproximately(columnPositionDelta);
+        expectApproximate(thumbPositionDelta, columnPositionDelta);
         // TODO: This was commented out after switching from the legacy table to the current
         // MDC-based table. This failed by being inaccurate by several pixels.
-        // expect(nextColumnPositionDelta).isApproximately(columnPositionDelta);
+        // expAppexpectApproximateect(nextColumnPositionDelta, columnPositionDelta);
 
         // TODO: This was commented out after switching from the legacy table to the current
         // MDC-based table. This failed by being inaccurate by several pixels.
-        // expect(component.getTableWidth()).isApproximately(initialTableWidth + 5);
-        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth + 5);
+        // expAppexpectApproximateect(component.getTableWidth(), initialTableWidth + 5);
+        expectApproximate(component.getColumnWidth(1), initialColumnWidth + 5);
 
         component.updateResizeWithMouseInProgress(1);
         fixture.detectChanges();
         flush();
 
         thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
         columnPositionDelta = component.getColumnOriginPosition(1) - initialColumnPosition;
-        expect(thumbPositionDelta).isApproximately(columnPositionDelta);
+        expectApproximate(thumbPositionDelta, columnPositionDelta);
 
-        expect(component.getTableWidth()).isApproximately(initialTableWidth + 1);
-        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth + 1);
+        expectApproximate(component.getTableWidth(), initialTableWidth + 1);
+        expectApproximate(component.getColumnWidth(1), initialColumnWidth + 1);
 
         component.completeResizeWithMouseInProgress(1);
         flush();
 
-        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth + 1);
+        expectApproximate(component.getColumnWidth(1), initialColumnWidth + 1);
 
         component.endHoverState();
         fixture.detectChanges();
@@ -509,7 +491,7 @@ describe('Material Popover Edit', () => {
         flush();
 
         let thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
-        expect(thumbPositionDelta).isApproximately(5);
+        expectApproximate(thumbPositionDelta, 5);
         expect(component.getColumnWidth(1)).toBe(initialColumnWidth);
 
         component.updateResizeWithMouseInProgress(1);
@@ -524,8 +506,8 @@ describe('Material Popover Edit', () => {
         component.completeResizeWithMouseInProgress(1);
         flush();
 
-        expect(component.getTableWidth()).isApproximately(initialTableWidth + 1);
-        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth + 1);
+        expectApproximate(component.getTableWidth(), initialTableWidth + 1);
+        expectApproximate(component.getColumnWidth(1), initialColumnWidth + 1);
 
         component.endHoverState();
         fixture.detectChanges();
@@ -565,18 +547,18 @@ describe('Material Popover Edit', () => {
 
         let thumbPositionDelta = component.getOverlayThumbPosition(1) - initialThumbPosition;
         let columnPositionDelta = component.getColumnOriginPosition(1) - initialColumnPosition;
-        expect(thumbPositionDelta).isApproximately(columnPositionDelta);
+        expectApproximate(thumbPositionDelta, columnPositionDelta);
 
-        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth + 5);
+        expectApproximate(component.getColumnWidth(1), initialColumnWidth + 5);
         // TODO: This was commented out after switching from the legacy table to the current
         // MDC-based table. This failed by being inaccurate by several pixels.
-        // expect(component.getTableWidth()).isApproximately(initialTableWidth + 5);
+        // expAppexpectApproximateect(component.getTableWidth(), initialTableWidth + 5);
 
         dispatchKeyboardEvent(document, 'keyup', ESCAPE);
         flush();
 
-        expect(component.getColumnWidth(1)).isApproximately(initialColumnWidth);
-        expect(component.getTableWidth()).isApproximately(initialTableWidth);
+        expectApproximate(component.getColumnWidth(1), initialColumnWidth);
+        expectApproximate(component.getTableWidth(), initialTableWidth);
 
         component.endHoverState();
         fixture.detectChanges();
@@ -631,12 +613,12 @@ describe('Material Popover Edit', () => {
 
       it('performs a column resize triggered via ColumnResizeNotifier', fakeAsync(() => {
         // Pre-verify that we are not updating the size to the initial size.
-        expect(component.getColumnWidth(1)).not.isApproximately(173);
+        expectApproximate(component.getColumnWidth(1), 173, false);
 
         component.columnResize.columnResizeNotifier.resize('name', 173);
         flush();
 
-        expect(component.getColumnWidth(1)).isApproximately(173);
+        expectApproximate(component.getColumnWidth(1), 173);
       }));
     });
   }
@@ -647,8 +629,6 @@ describe('Material Popover Edit', () => {
     let columnSizeStore: FakeColumnSizeStore;
 
     beforeEach(fakeAsync(() => {
-      jasmine.addMatchers(approximateMatcher);
-
       TestBed.configureTestingModule({
         providers: [
           FakeColumnSizeStore,
@@ -663,13 +643,13 @@ describe('Material Popover Edit', () => {
     }));
 
     it('applies the persisted size', fakeAsync(() => {
-      expect(component.getColumnWidth(1)).not.isApproximately(300);
+      expectApproximate(component.getColumnWidth(1), 300, false);
 
       columnSizeStore.emitSize('theTable', 'name', 300);
 
       flush();
 
-      expect(component.getColumnWidth(1)).isApproximately(300);
+      expectApproximate(component.getColumnWidth(1), 300);
     }));
 
     it('persists the user-triggered size update', fakeAsync(() => {
@@ -693,7 +673,7 @@ describe('Material Popover Edit', () => {
       const {tableId, columnId, sizePx} = columnSizeStore.setSizeCalls[0];
       expect(tableId).toBe('theTable');
       expect(columnId).toBe('name');
-      expect(sizePx).isApproximately(initialColumnWidth + 5);
+      expectApproximate(sizePx, initialColumnWidth + 5);
     }));
 
     it('persists the user-triggered size update (live updates off)', fakeAsync(() => {
@@ -719,7 +699,7 @@ describe('Material Popover Edit', () => {
       const {tableId, columnId, sizePx} = columnSizeStore.setSizeCalls[0];
       expect(tableId).toBe('theTable');
       expect(columnId).toBe('name');
-      expect(sizePx).isApproximately(initialColumnWidth + 5);
+      expectApproximate(sizePx, initialColumnWidth + 5);
     }));
   });
 });

src/material/table/table-data-source.spec.ts

@@ -3,12 +3,6 @@ import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'
 import {MatSort, MatSortModule} from '@angular/material/sort';
 import {Component, ViewChild} from '@angular/core';
 
-declare global {
-  interface Window {
-    ngDevMode?: object | null;
-  }
-}
-
 describe('MatTableDataSource', () => {
   describe('sort', () => {
     let dataSource: MatTableDataSource<{'prop': string | number}>;
@@ -95,7 +89,7 @@ describe('MatTableDataSource', () => {
 
     it('does not warn in non-dev mode when filtering non-object data', fakeAsync(() => {
       const warnSpy = spyOn(console, 'warn');
-      window.ngDevMode = null;
+      (window as any).ngDevMode = null;
       dataSource.data = [1, 2, 3, 4, 5] as unknown as {'prop': number}[];
 
       dataSource.filter = '1';
@@ -107,7 +101,7 @@ describe('MatTableDataSource', () => {
 
     it('displays the warning in dev mode when filtering non-object data', fakeAsync(() => {
       const warnSpy = spyOn(console, 'warn');
-      window.ngDevMode = {};
+      (window as any).ngDevMode = {};
       dataSource.data = [1, 2, 3, 4, 5] as unknown as {'prop': number}[];
 
       dataSource.filter = '1';