Flex-layout: Cannot compile with typescript 3.1.1

[olaf89]

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?

[CaerusKaru]

We'll need to wait for Material to update to TS v3.1.x before we move, because we have a peer dependency on the CDK. They'll likely update once Angular v7 goes into RC in the next few weeks.

[matheusdavidson]

Angular 7 RC is out, Angular Material and CDK has a beta, is there any way i can use flex-layout with ng 7rc ?

[CaerusKaru]

See https://github.com/angular/material2/pull/13359

[CaerusKaru]

Blocked on https://github.com/angular/material2/pull/13384

[xmlking]

material2 7.0.0-rc.0 release

[Splaktar]

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!

[CaerusKaru]

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.

[Splaktar]

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.

[CaerusKaru]

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.

[CaerusKaru]

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

[mattma]

@CaerusKaru When the Beta.19 will be released? Thanks for the great work!

[CaerusKaru]

@mattma see #859

[Splaktar]

Thanks, https://github.com/angular/flex-layout/pull/860 does indeed resolve this for me in the latest build.

[sanketdambhe]

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/[email protected] ###

[tan2411]

npm install @angular/[email protected]

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.

[Splaktar]

@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.

[daniszm]

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/[email protected]

Thanks! It works for me.

[tan2411]

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

Getting following error using @angular/[email protected]
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'.

tried @angular/[email protected] getting following 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.

---

Angular CLI: 6.1.5
Node: 8.11.4
OS: linux x64
Angular: 6.1.7
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.7.5
@angular-devkit/build-angular 0.7.5
@angular-devkit/build-optimizer 0.7.5
@angular-devkit/build-webpack 0.7.5
@angular-devkit/core 0.7.5
@angular-devkit/schematics 0.7.5
@angular/animations 6.1.10
@angular/cdk 6.4.7
@angular/cli 6.1.5
@angular/flex-layout 6.0.0-beta.18
@angular/material 6.4.7
@ngtools/webpack 6.1.5
@schematics/angular 0.7.5
@schematics/update 0.7.5
rxjs 6.0.0
typescript 2.7.2
webpack 4.9.2

[Splaktar]

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

npm WARN @angular/[email protected] requires a peer of @angular/cdk@^7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/core@>=7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] 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.

[Splaktar]

@sanketdambhe the comment that you posted in this thread is off topic from the OP (TypeScript 3.1.1 support). It should have been opened as a separate issue. No need to do that now though.

[sarahmarciano1]

@tan2411 did you solve it? cause I am running the same issues as you but I don't want to upgrade angular (currently I have ^6.1.10)

[andystroz]

I am looking for a fix to this as well

[Splaktar]

@andystroz the fix for this issue is to update to beta.19.

@sarahmarciano1 if you are staying on Angular v6, then you need to use beta.18.

[Mooli88]

Same issue here.
I'm on 19: "@angular/flex-layout": "^7.0.0-beta.19",

[Splaktar]

@Mooli88 with what version of Angular and TypeScript? You may need to rm -rf node_modules/; npm i.

[iambudi]

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

[kinny94]

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.

[sivagopi5072]

@Splaktar after installing npm i @angular/[email protected] i got error like below
ERROR in EPERM: operation not permitted, stat 'F:\sivagopi\custom-formsnode_modules@angular\flex-layout\flex-layout.d.ts'

[sivagopi5072]

@Splaktar after installing npm i @angular/[email protected] i got error like below
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'. Types of property 'removeListener' are incompatible. Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'. Types of parameters '_' and 'listener' are incompatible. Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'. Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'. Property 'handleEvent' is missing in type 'MediaQueryListListener'. node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,5): error TS2416: Property 'removeListener' in type 'MockMediaQueryList' is not assignable to the same property in base type 'MediaQueryList'. Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'. Types of parameters '_' and 'listener' are incompatible. Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'. Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'. node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(83,38): error TS2304: Cannot find name 'MediaQueryListEventMap'. node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(83,99): error TS2304: Cannot find name 'MediaQueryListEventMap'. node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(84,41): error TS2304: Cannot find name 'MediaQueryListEventMap'. node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(84,102): error TS2304: Cannot find name 'MediaQueryListEventMap'. node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(95,67): error TS2304: Cannot find name 'MediaQueryListEvent'. node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,5): error TS2416: Property 'removeListener' in type 'ServerMediaQueryList' is not assignable to the same property in base type 'MediaQueryList'. Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'. Types of parameters '_' and 'listener' are incompatible.

I need suggestion of commands to resolve the issue for using flex-layout
and my ng -version is
`
Angular CLI: 6.1.5
Node: 8.11.2
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.7.5
@angular-devkit/build-angular 0.7.5
@angular-devkit/build-optimizer 0.7.5
@angular-devkit/build-webpack 0.7.5
@angular-devkit/core 0.7.5
@angular-devkit/schematics 0.7.5
@angular/cdk 7.0.2
@angular/cli 6.1.5
@angular/flex-layout 7.0.0-beta.19
@angular/material 7.0.2
@ngtools/webpack 6.1.5
@schematics/angular 0.7.5
@schematics/update 0.7.5
rxjs 6.3.3
typescript 2.7.2
webpack 4.9.2`

[Splaktar]

@Splaktar after installing npm i @angular/[email protected] i got error like below
ERROR in EPERM: operation not permitted, stat 'F:\sivagopi\custom-formsnode_modules@angular\flex-layout\flex-layout.d.ts'

@sivagopi5072 that is a permissions error from your local file system.

[sivagopi5072]

@Splaktar How to resolve that issue

[Splaktar]

@sivagopi5072 @angular/[email protected] 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.

[Splaktar]

@sivagopi5072 I'm not sure what version of Windows you are running, but for file system permission issues you could try the Windows 10 support forums, the npm docs, or Superuser.

[sivagopi5072]

@Splaktar i am using windows 7 ultimate. Now i am implementing the command ng update and will send you the update

[sivagopi5072]

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

[dancar]

adding my experience of 30 minutes 35 seconds for completion of ng update --all - don't lose hope guys!

[darkyelox]

This is a shame, i can't use this in my Angular CLI 7 project, i guess someone found found a real solution because no one presented here works to me

[darkyelox]

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

[ekodikara]

I just runnpm install again and its worked for me..

Angular: 7.0.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.4
@angular-devkit/build-angular     0.10.4
@angular-devkit/build-optimizer   0.10.4
@angular-devkit/build-webpack     0.10.4
@angular-devkit/core              7.0.4                 v7/electron (schedule-v7)@angular-devkit/schematics        7.0.4
@angular/cli                      7.0.4
@angular/flex-layout              7.0.0-beta.19
@ngtools/webpack                  7.0.4
@schematics/angular               7.0.4
@schematics/update                0.10.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

[cozmik]

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.

This worked for me, thanks.. i had to use --force though

[mdhilwan]

I had some issues with 7.0.0-beta-19. As reported by others previously it had issues if you did not use the correct version of TypeScript. For me, I was still on TypeScript 2.4.2.

Flex-layout 6.0.0-beta.18 failed for me as well.
But... Flex-layout 5.0.0-beta.15 worked for me.

Hope that helped someone here.

[newschapmj1]

I had just migrated a project from Angular 6 to 7 and got the error above.
Running ng update --all fixed the problem for me.

UPDATE package.json (3868 bytes)
added 50 packages from 58 contributors, removed 24 packages, updated 38 packages, moved 3 packages and audited 26401 packages in 19.694s

[cadaats]

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

[mdhilwan]

Have you tried with “Flex-layout 6.0.0-beta.18”?

[cadaats]

      Have you tried with “Flex-layout 6.0.0-beta.18”?

No luck, It asked me to downgrade angular to 6, but since its just a warning, I ignored and still got a bunch of 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' is not assignable to type 'Map'.
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' is not assignable to type 'Map'.
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'.
src/app/ordermanagement/components/side-nav/side-nav.component.ts(15,22): error TS2322: Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'.
src/app/ordermanagement/components/side-nav/side-nav.component.ts(15,22): error TS2322: Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'.
Property 'onchange' is missing in type 'MediaQueryListEvent'.

[cadaats]

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

[cadaats]

I changed my code from commented line to the one below and it started working. I believe the latest 7.1.1 has changed code or fixed it. Am less than a week into angular/web technologies, I appreciate if someone can explain if this is right way to fix it or is there a better way to do it?

Code snippet:

private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  constructor(zone: NgZone) {
    this.mediaMatcher.addListener(mql =>
                     ///zone.run(() => this.mediaMatcher = mql))); //This is old code
                    zone.run(() => **this.mediaMatcher = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`)**)); //This works!!
   }

[Splaktar]

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

[cadaats]

@splaktar - thanks, it helps.

[WaltEhren]

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

[cristtopher]

the problem persists for me, I have angular v7, and I have tested with flex-layout beta 18 and 19, in both I have the same error, changing typescript version, and with @cadaats 's snippet.

ERROR in src/app/core/admin-layout/admin-layout.component.ts(54,9): error TS2322: Type 'MediaQueryListEvent' is not assignable to type 'MediaQueryList'. Property 'onchange' is missing in type 'MediaQueryListEvent'.

admin-layout.component.ts(54,9)
constructor( private router: Router, zone: NgZone ) { this.mediaMatcher.addListener(mql => zone.run(() => { console.log('mql', mql); this.mediaMatcher = mql; }) ); }

Package version
"@agm/core": "^1.0.0-beta.5",
"@angular/animations": "^7.1.3",
"@angular/cdk": "^7.1.1",
"@angular/common": "7.1.3",
"@angular/compiler": "7.1.3",
"@angular/core": "7.1.3",
"@angular/flex-layout": "^7.0.0-beta.19",
"@angular/forms": "7.1.3",
"@angular/http": "7.1.3",
"@angular/material": "^7.1.1",
"@angular/material-moment-adapter": "7.1.1",
"@angular/platform-browser": "7.1.3",
"@angular/platform-browser-dynamic": "7.1.3",
"@angular/router": "7.1.3",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3"

"typescript": "3.1.6",
"@angular-devkit/build-angular": "~0.11.0",
"@angular/cli": "7.1.3",
"@angular/compiler-cli": "7.1.3"

[PiotrGutowski]

Unfortunately I have the same problem as @cristtopher

[cadaats]

@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

[PiotrGutowski]

@cadaats Great , it works! Thanks

[SSTPIERRE2]

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

npm WARN @angular/[email protected] requires a peer of @angular/cdk@^7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] requires a peer of @angular/core@>=7.0.0-rc.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected] 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.

[Saroj12345]

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

ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.3.0 but 3.3.3 was found instead. in angular 7

solved it using npm i [email protected] --save-dev --save-exact

[AskYous]

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

[samanmunikar]

Update to FlexLayout to @angular/[email protected]

ng install @angular/[email protected]

It worked for me.

[rwoody]

Still getting this error with:

• @angular/[email protected]
• Angular 7.2.15
• TypeScript 3.1.6 (strict)

[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._}