flex-layout: Cannot compile with typescript 3.1.1

Bug Report

What is the expected behavior?

Cannot compile with typescript 3.1.1

What is the current behavior?

Im getting following errors:

ERROR in node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(25,15): error TS2416: Property '_registry' in type 'MockMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type 'Map<string, MockMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
    Type 'MockMediaQueryList' is not assignable to type 'MediaQueryList'.
      Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(63,22): error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(80,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(11,22): error TS2420: Class 'ServerMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Property 'onchange' is missing in type 'ServerMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(28,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(42,15): error TS2416: Property '_registry' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type 'Map<string, ServerMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
    Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.
      Property 'onchange' is missing in type 'ServerMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(54,15): error TS2416: Property '_buildMQL' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type '(query: string) => ServerMediaQueryList' is not assignable to type '(query: string) => MediaQueryList'.
    Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.

What are the steps to reproduce?

Compile app using typescript 3.1.1 and flex-layout 6.0.0-beta.18

What is the use-case or motivation for changing an existing behavior?

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

Is there anything else we should know?

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 27
  • Comments: 60 (19 by maintainers)

Commits related to this issue

Most upvoted comments

use previous version of flex i.e before 7.0.0-beta.19 Compile app using typescript 3.1.1 and flex-layout 6.0.0-beta.18

npm install @angular/flex-layout@6.0.0-beta.18

+41
sanketdambhe on Oct 10, 2018

I’ve added the necessary patches in #855, and CI looks good, so we should be able to get this merged into the nightly tomorrow, targeting a 7.0.0 release either late this week or early next week.

+21
CaerusKaru on Oct 4, 2018

npm install @angular/flex-layout@6.0.0-beta.18

Getting this error

ERROR in node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(72,67): error TS1144: '{' or ';' expected.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,5): error TS1128: Declaration or statement expected.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,33): error TS1005: ';' expected.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,39): error TS1109: Expression expected.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(79,5): error TS1128: Declaration or statement expected.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(80,1): error TS1128: Declaration or statement expected.
+9
tan2411 on Oct 10, 2018

material2 7.0.0-rc.0 release

+7
xmlking on Oct 2, 2018

I ran npm install @angular/flex-layout@latest and it worked for me.

+6
AskYous on Mar 1, 2019

Yep, thankfully https://github.com/angular/material2/pull/13384 and https://github.com/angular/material2/pull/13359 were merged and 7.0.0-rc.0 has been released.

This library and @angular/fire are the two holding me back from fully testing the RC atm.

Thanks for the hard work @CaerusKaru!

+6
Splaktar on Oct 3, 2018

This worked for me using the latest angular cli, two commands: ng update --all npm install angular/flex-layout-builds --save

+5
darkyelox on Nov 3, 2018

Same issue here. I’m on 19: “@angular/flex-layout”: “^7.0.0-beta.19”,

+4
Mooli88 on Oct 19, 2018

You’re not doing anything wrong. Somehow along the way I did everything except actually upgrade the version of TS. I’ll do that now.

+4
CaerusKaru on Oct 8, 2018

I had the same issue. I guess the latest version of Flex Layout is not compatible with the older version of Angular. I ran ng-update --all and I was good to go. Also updated my typescript version to 3.1.1.

+3
kinny94 on Oct 23, 2018

I installed the nightly via "@angular/flex-layout": "https://github.com/angular/flex-layout-builds#7.0.0-beta.19-2401536", but I am still seeing the same kind of failures:

BUILD ERROR
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(25,15): error TS2416: Property '_registry' in type 'MockMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type 'Map<string, MockMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
    Type 'MockMediaQueryList' is not assignable to type 'MediaQueryList'.
      Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(63,22): error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(80,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(11,22): error TS2420: Class 'ServerMediaQueryList' incorrectly implements interface 'MediaQueryList'.
  Property 'onchange' is missing in type 'ServerMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(28,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(42,15): error TS2416: Property '_registry' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type 'Map<string, ServerMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
    Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.
      Property 'onchange' is missing in type 'ServerMediaQueryList'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(54,15): error TS2416: Property '_buildMQL' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
  Type '(query: string) => ServerMediaQueryList' is not assignable to type '(query: string) => MediaQueryList'.
    Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.

I’m not sure if I need to wait for the NPM release or if I’m doing something wrong here.

I tried the instructions here including rm -rf node_modules/, but got the same result.

+3
Splaktar on Oct 8, 2018

@Splaktar Thanks for your suggestions. I got resolved the issues by using Command ng update --all

+2
sivagopi5072 on Oct 30, 2018

@tan2411 you should have seen some errors when you installed 7.0.0-beta.19 like this:

npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/cdk@^7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/core@>=7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/common@>=7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.

This is because Angular ^7.0.0-rc.0 is required and you are running 6.1.10.

+2
Splaktar on Oct 14, 2018

use previous version of flex i.e before 7.0.0-beta.19 Compile app using typescript 3.1.1 and flex-layout 6.0.0-beta.18

npm install @angular/flex-layout@6.0.0-beta.18

Thanks! It works for me.

+2
daniszm on Oct 12, 2018

Update to FlexLayout to @angular/flex-layout@7.0.0-beta.24

ng install @angular/flex-layout@7.0.0-beta.24

It worked for me.

+1
samanmunikar on Apr 9, 2019

ng update --all worked for me after that got below issue

ERROR in The Angular Compiler requires TypeScript >=3.1.1 and ❤️.3.0 but 3.3.3 was found instead. in angular 7

solved it using npm i typescript@3.1.6 --save-dev --save-exact

+1
Saroj12345 on Feb 13, 2019

@tan2411 you should have seen some errors when you installed 7.0.0-beta.19 like this:

npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/cdk@^7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/core@>=7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/flex-layout@7.0.0-beta.19 requires a peer of @angular/common@>=7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.

This is because Angular ^7.0.0-rc.0 is required and you are running 6.1.10.

This is a good point about using angular 7.x with flex layout 7.x. I landed here after rolling back this package to the latest 6.x because I’m having issues with breakpoints & media queries in 7.0.0-beta.19 (beta.22 along with https://github.com/angular/flex-layout/issues/945 should fix that 🙏). The rollback worked great for the UI, but the frontend tests won’t build, so for anyone trying to do what I did, you will have to use angular 7.x with flex-layout 7.x.

+1
SSTPIERRE2 on Dec 21, 2018

@cristtopher / @PiotrGutowski - my snippet doesn’t assign mql, but re-assign the matchmedia statement (remove the *** and try it) Also, this below code using changeDetectorRef should help https://stackblitz.com/angular/yvojdgpveqo?file=app%2Fsidenav-responsive-example.ts

+1
cadaats on Dec 18, 2018

If anyone still has that problem and nothing worked, I have another fix. Keep in mind that I’m using angular 7+.

npm install @angular/flex-layout@latest

+1
WaltEhren on Dec 13, 2018

@cadaats you probably want to ask in Gitter rather than in a closed issue.

+1
Splaktar on Nov 29, 2018

@darkyelox - Can you post your ng version ? I too tried all work arounds on this page and still no luck

+1
cadaats on Nov 28, 2018

I still get this error on running [ng update --all], any help appreciated!!

error TS2322: Type ‘MediaQueryListEvent’ is not assignable to type ‘MediaQueryList’.

error TS2322: Type ‘MediaQueryListEvent’ is not assignable to type ‘MediaQueryList’. Property ‘onchange’ is missing in type ‘MediaQueryListEvent’.

Package Version

@angular-devkit/architect 0.11.0 @angular-devkit/build-angular 0.11.0 @angular-devkit/build-optimizer 0.11.0 @angular-devkit/build-webpack 0.11.0 @angular-devkit/core 7.1.0 @angular-devkit/schematics 7.1.0 @angular/flex-layout 7.0.0-beta.19 @ngtools/webpack 7.1.0 @schematics/angular 7.1.0 @schematics/update 0.11.0 rxjs 6.3.3 typescript 3.1.6 webpack 4.23.1

+1
cadaats on Nov 28, 2018

@sivagopi5072 @angular/flex-layout@7.0.0-beta.19 does not support Angular: 6.1.10, please use ng update to see which packages need to be updated, then do ng update <list of packages> to update them.

+1
Splaktar on Oct 30, 2018

I’ve just upgraded my angular 6 project to 7. Flex layout works well with version ^7.0.0-beta.19 as @Mooli88 mentioned.

+1
iambudi on Oct 23, 2018

@sanketdambhe is there a question?

@tan2411 beta.18 isn’t supported with TypeScript 3.1.1. You need to use 7.0.0-beta.19.

+1
Splaktar on Oct 11, 2018

@mattma see #859

+1
CaerusKaru on Oct 8, 2018

@Splaktar should be fixed with latest commit. Please let me know of any ill-effects by filing a new issue.

+1
CaerusKaru on Oct 8, 2018
Read more comments on GitHub
← flex-layout: Breakpoint fallback broken for CSS @media queries with Universal server rendering
flex-layout: crash with 2.0.0-beta.8 →