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

[jrayga]

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"
  }
}

[stockrel]

+1

[polterguy]

+1

[StevenDieu]

+1

[alexdaud]

+1

[thecerber]

I was helped the downgrade version of rxjs to 6.5.3

[burner]

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

[polterguy]

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 ^_^

[smarza]

I was helped the downgrade version of rxjs to 6.5.3

Downgrading the rxjs to 6.5.3 worked but it also changed a lot of import paths like filter and tap (rxjs) for example. So, that´s not the ideal fix to my projects.

Appreciate your help.

[smarza]

Worked beautifully for now.

But, it concerns me because "skipLibCheck" will probably mask a lot of future issues. So use with care. :)

For now, I´m going to enable skipLibCheck too.

Thanks a lot.

[burner]

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.

[CaerusKaru]

I recognize this as a wide-reaching issue, I am not dismissing this. Unfortunately, I'm not able to reproduce this issue in our repo even with the exact dependencies listed. Can someone provide a minimal reproduction I can look into? If provided, this will be investigated expeditiously (but the repro must be minimal).

[marklbarlow]

I'm pretty sure this is caused by:

"@types/node": "^18.8.4"

18.8.3 seems to work fine.

[aolszowka]

@CaerusKaru Sorry for asking the obvious but did you clear out your package-lock.json before attempting to reproduce it? I believe its because many people (ourselves included) have floating dependencies and no package-lock.json (I know, a discussion for another time...). If you've done that I will work towards getting a minimal repro for you unless someone beats me to the punch.

[danny-nieruch]

I've just created a new angular project, added the flex-layout dependency and imported the FlexLayoutModule to the app.module.ts. I'm getting the same error:

"Property 'prototype' is missing in type 'MockMediaQueryList' but required in type 'MediaQueryList'."

package.json:

{
  "name": "angular14latest",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "@angular/flex-layout": "^14.0.0-beta.40",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.5",
    "@angular/cli": "~14.2.5",
    "@angular/compiler-cli": "^14.2.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.3.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

[CaerusKaru]

@marklbarlow is correct. Node v18 typings mean that the type in question extends EventTarget, which is a breaking change. Since Angular Layout doesn't yet support Node v18, and likely won't until Angular v15 is released, I don't see this as being fixed in v14 unless I can find a non-breaking way to resolve this, which I am not ruling out yet. If there is a breaking version for this, we will cut a pre-emptive v15 release. Ordinarily we wait for v15 final, but this is a special circumstance.

[CaerusKaru]

Tracking fix, will land in v14: https://github.com/angular/flex-layout/pull/1424

[tarlepp]

Just faced this same issue - and looks like there is some work already done - great!

[VashJuan]

Also reported as: https://github.com/angular/angular/issues/47736 I'll put a note to refer to this issue...

[sumitsarraf]

+1

[anisabboud]

@CaerusKaru Thank you for the quick fix!!

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

[polterguy]

Thx guys and gals, finally our stuff is working again. I applied the skipLibCheck as a temporary fix and things are building ...

Note2self - Include the "package-lock.json" file in the git repo ... :/

[aceArt-GmbH]

Tracking fix, will land in v14: https://github.com/angular/flex-layout/pull/1424

Older versions like 13.0.0-beta.38 are affected as well

[rajeshfavour]

Older versions like 11.0.0-beta.33 are affected as well

[CaerusKaru]

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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}