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)
+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:
skipLibCheck
totrue
(this is my recommendation for really any project, regardless of circumstance)I am leaving this issue open for now so that discovery is easy for impacted users.
Tracking fix, will land in v14: https://github.com/angular/flex-layout/pull/1424
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.
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.
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 ^_^