fix(material/core): fix mat-error not rendering with Closure Compiler (#28405)

* fix(material/core): fix mat-error not rendering with Closure Compiler

Fix Closure Compiler issue with mat-error. Fix issue where
mat-error does not render even when there is an error.

Existing behavior is that _ErrorStateTracker sometimes reports error
state as false when there is an error. This happens because Closure
Compiler renames the _ErrorStateTracker's ErrorStateMatcher. The
compiler renames all the other implementations of ErrorStateMatcher, but
they have different names. Causes the matcher to be null in
_ErrorStateTracker. Since ErrorStateMatcher is used as a class in some
situations, Closure Compiler is not aware that it is intended to be the
same type as the other implementations of ErrorStateMather.

Fix issue by declaring ErrorStateMatcher as an interface. When this
commit applied, mat-error will render when built with Closure
Compiler.

Googlers: see [internal issue report](b/316413299)

* !fixup  fix(material/core): fix mat-error not rendering with Closure Compiler

(cherry picked from commit 6c49372)

Author: zarend

src/material/core/common-behaviors/error-state.ts

@@ -8,9 +8,12 @@
 
 import {AbstractControl, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
 import {Subject} from 'rxjs';
-import {ErrorStateMatcher} from '../error/error-options';
+import {ErrorStateMatcher as _ErrorStateMatcher} from '../error/error-options';
 import {AbstractConstructor, Constructor} from './constructor';
 
+// Declare ErrorStateMatcher as an interface to have compatibility with Closure Compiler.
+interface ErrorStateMatcher extends _ErrorStateMatcher {}
+
 /** @docs-private */
 export interface CanUpdateErrorState {
   /** Updates the error state based on the provided error state matcher. */
@@ -62,10 +65,7 @@ export class _ErrorStateTracker {
     const parent = this._parentFormGroup || this._parentForm;
     const matcher = this.matcher || this._defaultMatcher;
     const control = this.ngControl ? (this.ngControl.control as AbstractControl) : null;
-    // Note: the null check here shouldn't be necessary, but there's an internal
-    // test that appears to pass an object whose `isErrorState` isn't a function.
-    const newState =
-      typeof matcher?.isErrorState === 'function' ? matcher.isErrorState(control, parent) : false;
+    const newState = matcher?.isErrorState(control, parent) ?? false;
 
     if (newState !== oldState) {
       this.errorState = newState;

tools/public_api_guard/material/core.md

@@ -72,7 +72,7 @@ export interface CanDisableRipple {
 // @public
 export interface CanUpdateErrorState {
     errorState: boolean;
-    errorStateMatcher: ErrorStateMatcher;
+    errorStateMatcher: ErrorStateMatcher_2;
     updateErrorState(): void;
 }
 
@@ -136,9 +136,9 @@ export class ErrorStateMatcher {
 
 // @public
 export class _ErrorStateTracker {
-    constructor(_defaultMatcher: ErrorStateMatcher | null, ngControl: NgControl | null, _parentFormGroup: FormGroupDirective | null, _parentForm: NgForm | null, _stateChanges: Subject<void>);
+    constructor(_defaultMatcher: ErrorStateMatcher_2 | null, ngControl: NgControl | null, _parentFormGroup: FormGroupDirective | null, _parentForm: NgForm | null, _stateChanges: Subject<void>);
     errorState: boolean;
-    matcher: ErrorStateMatcher;
+    matcher: ErrorStateMatcher_2;
     // (undocumented)
     ngControl: NgControl | null;
     updateErrorState(): void;