Build error after Angular upgrade - MediaQueryListEvent not assignable of type MediaQueryList

Question

I have upgraded my Angular version from 5.2 to 7.2.0 and using below versions of packages:

"@angular/flex-layout": "^7.0.0-beta.22", typescript version : 3.2.2, "@angular/cdk" : 7.2.1, "@angular/cli : 7.1.4"

I getting a build error:

'MediaQueryListEvent' is not assignable of type MediaQueryList.

Code:

export class LayoutComponent implements OnInit, OnDestroy {

  private _router: Subscription;

  mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  url: string;
  sidePanelOpened;

  constructor (
    private _element: ElementRef,
    private router: Router) {
    this.mediaMatcher.addListener(mql => zone.run(() => {
      this.mediaMatcher = mql; //i am getting error here Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'.
                  //Property 'onchange' is missing in type 'MediaQueryListEvent'.
    }));
  }
 }

How can I fix this issue?

Answer 1

Hi you can try changing this line

zone.run(() => this.mediaMatcher = mql));

for this

zone.run(() => this.mediaMatcher = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`)));