flex-layout: Angular 14 - error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'. Property 'prototype' is missing in type 'MockMediaQueryList' but required in type 'MediaQueryList'.

Bug Report

What is the current behavior?

ng serve build failed to compile. Shows error below

Error: node_modules/@angular/flex-layout/core/match-media/mock/mock-match-media.d.ts:59:22 - error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Property 'prototype' is missing in type 'MockMediaQueryList' but required in type 'MediaQueryList'.

59 export declare class MockMediaQueryList implements MediaQueryList {
                        ~~~~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:5162:5
    5162     prototype: EventTarget;
             ~~~~~~~~~
    'prototype' is declared here.

What is the expected behavior?

Complete ng serve compile build

Which versions of Angular, Material, OS, TypeScript, and browsers are affected?

package.json below

{
"dependencies": {
    "@angular/animations": "~14.2.5",
    "@angular/cdk": "^14.2.4",
    "@angular/common": "~14.2.5",
    "@angular/compiler": "~14.2.5",
    "@angular/core": "~14.2.5",
    "@angular/flex-layout": "^14.0.0-beta.40",
    "@angular/forms": "~14.2.5",
    "@angular/material": "^14.2.4",
    "@angular/material-moment-adapter": "^14.2.4",
    "@angular/platform-browser": "~14.2.5",
    "@angular/platform-browser-dynamic": "~14.2.5",
    "@angular/router": "~14.2.5",
    "@ngrx/effects": "^14.3.2",
    "@ngrx/store": "^14.3.2",
    "@swimlane/ngx-charts": "^20.1.0",
    "jwt-decode": "^3.1.2",
    "lodash-es": "^4.17.21",
    "moment": "^2.29.4",
    "ngx-cookie-service": "^14.0.1",
    "ngx-mask": "^14.2.3",
    "ngx-mat-select-search": "^5.0.0",
    "ngx-pagination": "^6.0.2",
    "rxjs": "~7.5.7",
    "tslib": "^2.4.0",
    "zone.js": "~0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~14.2.5",
    "@angular/cli": "~14.2.5",
    "@angular/compiler-cli": "~14.2.5",
    "@faker-js/faker": "^7.5.0",
    "@ngrx/schematics": "^14.3.2",
    "@types/jasmine": "~4.3.0",
    "@types/lodash-es": "^4.17.6",
    "@types/node": "^18.8.4",
    "@types/uuid": "^8.3.4",
    "jasmine-core": "~4.4.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.1",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.8.4"
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 21
  • Comments: 25 (4 by maintainers)

Most upvoted comments

+1

v14.0.0-beta.41 has been released to NPM, please upgrade to that version. Unfortunately we will not be backporting this patch to older, unsupported versions, so you have three options for mitigation on an older version:

  1. Set skipLibCheck to true (this is my recommendation for really any project, regardless of circumstance)
  2. Do not use Node v18 or its typings
  3. Upgrade to latest

I am leaving this issue open for now so that discovery is easy for impacted users.

I got the hammer and added “skipLibCheck”: true to the tsconfig.json to get it to work

@CaerusKaru Thank you for the quick fix!!

Can the new version (beta.41) be published to npm?

I’m pretty sure this is caused by:

"@types/node": "^18.8.4"

18.8.3 seems to work fine.

But, it concerns me because “skipLibCheck” will probably mask a lot of future issues.

Yes, as soon as there is a patch for this on the flex-layout side, I’ll will update to it and set skipLibCheck to false.

I got the hammer and added “skipLibCheck”: true to the tsconfig.json to get it to work

This works perfect! Thank you, you’re a life saver! If anybody knows how to avoid this in the future, I would appreciate it! Our entire infrastructure for building frontends is DOWN …!!

And we allow for our users to “generate” frontends, which is our primary product, so it’s a big deal for us!!

Thank you a bajillion times ^_^