Update the latest Angular version (#26862)

* build: resolve build errors after APF changes

Fixes some build errors that came up after the recent APF updates.

* fix(multiple): useDefineForClassFields-related fixes

`useDefineForClassFields` is enabled by default when targeting es2022. Even though we're likely to disable it, we may have to support it in the future. These changes update our components to be compatible.

* build: update API goldens

The .d.ts produced by the compiler has changed in the latest version so we have to update all the goldens.

Author: crisbeto

package.json

@@ -56,12 +56,12 @@
   },
   "version": "16.0.0-next.4",
   "dependencies": {
-    "@angular/animations": "^16.0.0-next.2",
-    "@angular/common": "^16.0.0-next.2",
-    "@angular/compiler": "^16.0.0-next.2",
-    "@angular/core": "^16.0.0-next.2",
-    "@angular/forms": "^16.0.0-next.2",
-    "@angular/platform-browser": "^16.0.0-next.2",
+    "@angular/animations": "^16.0.0-next.5",
+    "@angular/common": "^16.0.0-next.5",
+    "@angular/compiler": "^16.0.0-next.5",
+    "@angular/core": "^16.0.0-next.5",
+    "@angular/forms": "^16.0.0-next.5",
+    "@angular/platform-browser": "^16.0.0-next.5",
     "@types/google.maps": "^3.52.4",
     "@types/youtube": "^0.0.46",
     "rxjs": "^6.6.7",
@@ -70,18 +70,18 @@
     "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.0.0-next.3",
-    "@angular-devkit/core": "^16.0.0-next.3",
-    "@angular-devkit/schematics": "^16.0.0-next.3",
+    "@angular-devkit/build-angular": "^16.0.0-next.5",
+    "@angular-devkit/core": "^16.0.0-next.5",
+    "@angular-devkit/schematics": "^16.0.0-next.5",
     "@angular/bazel": "15.0.4",
-    "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#16f13b9e919478d61ec98ce60901f3bdebb5d4e5",
-    "@angular/cli": "^16.0.0-next.3",
-    "@angular/compiler-cli": "^16.0.0-next.2",
-    "@angular/localize": "^16.0.0-next.2",
+    "@angular/build-tooling": "https://github.com/angular/dev-infra-private-build-tooling-builds.git#4c7d40592a36f061c23dd08f437f734081f9979d",
+    "@angular/cli": "^16.0.0-next.5",
+    "@angular/compiler-cli": "^16.0.0-next.5",
+    "@angular/localize": "^16.0.0-next.5",
     "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#46a6cb28a6ca6a3a7a096656280ed27b02243e9a",
-    "@angular/platform-browser-dynamic": "^16.0.0-next.2",
-    "@angular/platform-server": "^16.0.0-next.2",
-    "@angular/router": "^16.0.0-next.2",
+    "@angular/platform-browser-dynamic": "^16.0.0-next.5",
+    "@angular/platform-server": "^16.0.0-next.5",
+    "@angular/router": "^16.0.0-next.5",
     "@axe-core/webdriverjs": "^4.3.2",
     "@babel/core": "^7.16.12",
     "@bazel/bazelisk": "1.12.1",
@@ -146,7 +146,7 @@
     "@octokit/rest": "18.3.5",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.1.3",
-    "@schematics/angular": "^16.0.0-next.3",
+    "@schematics/angular": "^16.0.0-next.5",
     "@types/babel__core": "^7.1.18",
     "@types/browser-sync": "^2.26.3",
     "@types/fs-extra": "^9.0.13",

scripts/create-legacy-tests-bundle.mjs

@@ -50,7 +50,7 @@ async function main() {
   const specEntryPointFile = await createEntryPointSpecFile();
   const esbuildLinkerPlugin = await createEsbuildAngularOptimizePlugin({
     enableLinker: {
-      filterPaths: /fesm2020/,
+      filterPaths: /fesm2022/,
       linkerOptions: {
         linkerJitMode: true,
       },
@@ -63,6 +63,7 @@ async function main() {
     sourceRoot: projectDir,
     platform: 'browser',
     format: 'iife',
+    target: 'es2015',
     outfile: outFile,
     plugins: [esbuildResolvePlugin, esbuildLinkerPlugin],
     stdin: {contents: specEntryPointFile, resolveDir: projectDir},

src/cdk-experimental/popover-edit/table-directives.ts

@@ -364,7 +364,7 @@ export class CdkPopoverEdit<C> implements AfterViewInit, OnDestroy {
   inputs: POPOVER_EDIT_INPUTS,
 })
 export class CdkPopoverEditTabOut<C> extends CdkPopoverEdit<C> {
-  protected override focusTrap?: FocusEscapeNotifier;
+  protected override focusTrap?: FocusEscapeNotifier = undefined;
 
   constructor(
     elementRef: ElementRef,
@@ -382,10 +382,7 @@ export class CdkPopoverEditTabOut<C> extends CdkPopoverEdit<C> {
       .escapes()
       .pipe(takeUntil(this.destroyed))
       .subscribe(direction => {
-        if (this.services.editEventDispatcher.editRef) {
-          this.services.editEventDispatcher.editRef.blur();
-        }
-
+        this.services.editEventDispatcher.editRef?.blur();
         this.services.focusDispatcher.moveFocusHorizontally(
           closest(this.elementRef.nativeElement!, CELL_SELECTOR) as HTMLElement,
           direction === FocusEscapeNotifierDirection.START ? -1 : 1,

src/cdk-experimental/selection/select-all.ts

@@ -32,18 +32,14 @@ export class CdkSelectAll<T> implements OnDestroy, OnInit {
    * The checked state of the toggle.
    * Resolves to `true` if all the values are selected, `false` if no value is selected.
    */
-  readonly checked: Observable<boolean> = this._selection.change.pipe(
-    switchMap(() => observableOf(this._selection.isAllSelected())),
-  );
+  readonly checked: Observable<boolean>;
 
   /**
    * The indeterminate state of the toggle.
    * Resolves to `true` if part (not all) of the values are selected, `false` if all values or no
    * value at all are selected.
    */
-  readonly indeterminate: Observable<boolean> = this._selection.change.pipe(
-    switchMap(() => observableOf(this._selection.isPartialSelected())),
-  );
+  readonly indeterminate: Observable<boolean>;
 
   /**
    * Toggles the select-all state.
@@ -72,7 +68,15 @@ export class CdkSelectAll<T> implements OnDestroy, OnInit {
     @Self()
     @Inject(NG_VALUE_ACCESSOR)
     private readonly _controlValueAccessor: ControlValueAccessor[],
-  ) {}
+  ) {
+    this.checked = _selection.change.pipe(
+      switchMap(() => observableOf(_selection.isAllSelected())),
+    );
+
+    this.indeterminate = _selection.change.pipe(
+      switchMap(() => observableOf(_selection.isPartialSelected())),
+    );
+  }
 
   ngOnInit() {
     this._assertValidParentSelection();

src/cdk-experimental/selection/selection-toggle.ts

@@ -43,10 +43,7 @@ export class CdkSelectionToggle<T> implements OnDestroy, OnInit {
   protected _index?: number;
 
   /** The checked state of the selection toggle */
-  readonly checked: Observable<boolean> = this._selection.change.pipe(
-    switchMap(() => observableOf(this._isSelected())),
-    distinctUntilChanged(),
-  );
+  readonly checked: Observable<boolean>;
 
   /** Toggles the selection */
   toggle() {
@@ -61,7 +58,12 @@ export class CdkSelectionToggle<T> implements OnDestroy, OnInit {
     @Self()
     @Inject(NG_VALUE_ACCESSOR)
     private _controlValueAccessors: ControlValueAccessor[],
-  ) {}
+  ) {
+    this.checked = _selection.change.pipe(
+      switchMap(() => observableOf(this._isSelected())),
+      distinctUntilChanged(),
+    );
+  }
 
   ngOnInit() {
     this._assertValidParentSelection();

src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts

@@ -55,11 +55,11 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
   @ViewChild('exchange') exchangeInput: HTMLInputElement;
   @ViewChild('subscriber') subscriberInput: HTMLInputElement;
 
-  parts = this._formBuilder.group({
-    area: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
-    exchange: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
-    subscriber: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4)]],
-  });
+  parts: FormGroup<{
+    area: FormControl<string | null>;
+    exchange: FormControl<string | null>;
+    subscriber: FormControl<string | null>;
+  }>;
   stateChanges = new Subject<void>();
   focused = false;
   touched = false;
@@ -134,7 +134,7 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
   }
 
   constructor(
-    private _formBuilder: FormBuilder,
+    formBuilder: FormBuilder,
     private _focusMonitor: FocusMonitor,
     private _elementRef: ElementRef<HTMLElement>,
     @Optional() @Inject(MAT_FORM_FIELD) public _formField: MatFormField,
@@ -143,6 +143,12 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
     if (this.ngControl != null) {
       this.ngControl.valueAccessor = this;
     }
+
+    this.parts = formBuilder.group({
+      area: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
+      exchange: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
+      subscriber: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(4)]],
+    });
   }
 
   ngOnDestroy() {

src/dev-app/menubar/mat-menubar-demo.ts

@@ -16,10 +16,10 @@ import {MatMenuBarModule} from '@angular/material-experimental/menubar';
   exportAs: 'demoMenu',
   template: '<ng-content></ng-content>',
   host: {
-    '[tabindex]': 'isInline() ? 0 : null',
+    '[tabindex]': 'isInline ? 0 : null',
     'role': 'menu',
     'class': 'cdk-menu mat-menu mat-menu-panel',
-    '[class.cdk-menu-inline]': 'isInline()',
+    '[class.cdk-menu-inline]': 'isInline',
     '[attr.aria-orientation]': 'orientation',
   },
   providers: [

src/dev-app/stepper/stepper-demo.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {
   AbstractControl,
   FormBuilder,
@@ -40,6 +40,7 @@ import {MatStepperModule} from '@angular/material/stepper';
   ],
 })
 export class StepperDemo {
+  private _formBuilder = inject(FormBuilder);
   isNonLinear = false;
   isNonEditable = false;
   disableRipple = false;
@@ -86,6 +87,4 @@ export class StepperDemo {
   get formArray(): AbstractControl | null {
     return this.formGroup.get('formArray');
   }
-
-  constructor(private _formBuilder: FormBuilder) {}
 }

src/google-maps/google-map/google-map.ts

@@ -24,6 +24,7 @@ import {
   NgZone,
   SimpleChanges,
   EventEmitter,
+  inject,
 } from '@angular/core';
 import {isPlatformBrowser} from '@angular/common';
 import {Observable} from 'rxjs';
@@ -60,7 +61,7 @@ export const DEFAULT_WIDTH = '500px';
   encapsulation: ViewEncapsulation.None,
 })
 export class GoogleMap implements OnChanges, OnInit, OnDestroy {
-  private _eventManager: MapEventManager = new MapEventManager(this._ngZone);
+  private _eventManager: MapEventManager = new MapEventManager(inject(NgZone));
   private _mapEl: HTMLElement;
   private _existingAuthFailureCallback: GoogleMapsWindow['gm_authFailure'];
 

src/google-maps/map-circle/map-circle.ts

@@ -9,7 +9,7 @@
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
 /// <reference types="google.maps" />
 
-import {Directive, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';
+import {Directive, Input, NgZone, OnDestroy, OnInit, Output, inject} from '@angular/core';
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
 import {map, take, takeUntil} from 'rxjs/operators';
 
@@ -25,7 +25,7 @@ import {MapEventManager} from '../map-event-manager';
   exportAs: 'mapCircle',
 })
 export class MapCircle implements OnInit, OnDestroy {
-  private _eventManager = new MapEventManager(this._ngZone);
+  private _eventManager = new MapEventManager(inject(NgZone));
   private readonly _options = new BehaviorSubject<google.maps.CircleOptions>({});
   private readonly _center = new BehaviorSubject<
     google.maps.LatLng | google.maps.LatLngLiteral | undefined