build: fix error from latest MDC canary (#21663)

The latest MDC canary version introduced its own types for `ResizeObserver` which broke
our code. These changes remove the polyfilled types and use MDC's instead.

Author: crisbeto

package.json

@@ -63,7 +63,7 @@
     "@types/youtube": "^0.0.40",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js-bundle": "^3.8.2",
-    "material-components-web": "10.0.0-canary.b2faa116a.0",
+    "material-components-web": "10.0.0-canary.2ed2d829b.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",
@@ -107,7 +107,6 @@
     "@types/node": "^14.14.22",
     "@types/node-fetch": "^2.5.5",
     "@types/parse5": "^6.0.0",
-    "@types/resize-observer-browser": "^0.1.3",
     "@types/semver": "^7.3.4",
     "@types/send": "^0.14.5",
     "@types/stylelint": "^9.10.1",

src/material-experimental/mdc-progress-bar/BUILD.bazel

@@ -27,7 +27,6 @@ ng_module(
         "//src/material/progress-bar",
         "@npm//@angular/core",
         "@npm//@material/linear-progress",
-        "@npm//@types/resize-observer-browser",
     ],
 )
 

src/material-experimental/mdc-progress-bar/progress-bar.ts

@@ -23,7 +23,11 @@ import {
 import {CanColor, CanColorCtor, mixinColor} from '@angular/material-experimental/mdc-core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {ProgressAnimationEnd} from '@angular/material/progress-bar';
-import {MDCLinearProgressAdapter, MDCLinearProgressFoundation} from '@material/linear-progress';
+import {
+  MDCLinearProgressAdapter,
+  MDCLinearProgressFoundation,
+  WithMDCResizeObserver,
+} from '@material/linear-progress';
 import {Subscription, fromEvent, Observable} from 'rxjs';
 import {filter} from 'rxjs/operators';
 import {Directionality} from '@angular/cdk/bidi';
@@ -93,10 +97,13 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
     },
     getWidth: () => this._rootElement.offsetWidth,
     attachResizeObserver: (callback) => {
-      if ((typeof window !== 'undefined') && window.ResizeObserver) {
-        const ro = new ResizeObserver(callback);
-        ro.observe(this._rootElement);
-        return ro;
+      const resizeObserverConstructor = (typeof window !== 'undefined') &&
+                                        (window as unknown as WithMDCResizeObserver).ResizeObserver;
+
+      if (resizeObserverConstructor) {
+        const observer = new resizeObserverConstructor(callback);
+        observer.observe(this._rootElement);
+        return observer;
       }
 
       return null;

src/material-experimental/tsconfig-tests.json

@@ -11,7 +11,7 @@
     "importHelpers": false,
     "module": "umd",
     "target": "es5",
-    "types": ["jasmine", "resize-observer-browser"],
+    "types": ["jasmine"],
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "paths": {

tsconfig.json

@@ -20,7 +20,7 @@
     "strictBindCallApply": true,
     "target": "es2015",
     "lib": ["es5", "es2015", "dom"],
-    "types": ["jasmine", "resize-observer-browser"],
+    "types": ["jasmine"],
     "baseUrl": ".",
     "paths": {
       "@angular/cdk": ["./src/cdk"],