@angular/flex-layout issue in new project

[deniz946]

Hello guys, pleased to discover this repo, cloned the repo, did npm install and after a successful install and try to serve the app with npm run start I get this @anglar/flex-layout issue, is anyone else facing this problem?

• npm version: 6.4.1
• node version: 10.13.0
• angular-cli version:

Angular CLI: 6.2.8
Node: 10.13.0
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, core, forms, http
... 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.8.8
@angular/cdk                      6.4.7
@angular/cli                      6.2.8
@angular/compiler-cli             6.0.3
@angular/flex-layout              7.0.0-beta.22
@angular/language-service         6.0.3
@angular/material                 6.4.7
@ngtools/webpack                  6.1.5
@schematics/angular               0.8.8
@schematics/update                0.8.8
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.28.2

$ npm run start

> mean@2.0.2 start C:\Proyectos\mean
> concurrently -c "yellow.bold,green.bold" -n "SERVER,BUILD" "nodemon server" "ng build --watch"

[SERVER] [nodemon] 1.18.9
[SERVER] [nodemon] to restart at any time, enter `rs`
[SERVER] [nodemon] watching: *.*
[SERVER] [nodemon] starting `node server`
[SERVER] ../../dist/
[SERVER] (node:21588) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To usethe new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
[SERVER] server started on port 4040 (development)
[SERVER] (node:21588) DeprecationWarning: collection.ensureIndex is deprecated. Use createIndexes instead.
[BUILD]
[BUILD] Date: 2018-12-28T08:24:36.556Z
[BUILD] Hash: b9aa9cb353148fdda2e9
[BUILD] Time: 5216ms
[BUILD] chunk {main} main.js, main.js.map (main) 608 bytes [initial] [rendered]
[BUILD] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 663 bytes [initial] [rendered]
[BUILD] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
[BUILD] chunk {styles} styles.js, styles.js.map (styles) 102 kB [initial] [rendered]
[BUILD]
[BUILD] 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'.
[BUILD]   Type 'Map<string, MockMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
[BUILD]     Type 'MockMediaQueryList' is not assignable to type 'MediaQueryList'.
[BUILD]       Types of property 'removeListener' are incompatible.
[BUILD]         Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'.
[BUILD]           Types of parameters '_' and 'listener' are incompatible.
[BUILD]             Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'.
[BUILD]               Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'.
[BUILD]                 Property 'handleEvent' is missing in type 'MediaQueryListListener'.
[BUILD] 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'.
[BUILD]   Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'.
[BUILD]     Types of parameters '_' and 'listener' are incompatible.
[BUILD]       Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'.
[BUILD]         Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(83,38): error TS2304: Cannot find name 'MediaQueryListEventMap'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(83,99): error TS2304: Cannot find name 'MediaQueryListEventMap'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(84,41): error TS2304: Cannot find name 'MediaQueryListEventMap'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(84,102): error TS2304: Cannot find name 'MediaQueryListEventMap'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(95,67): error TS2304: Cannot find name 'MediaQueryListEvent'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(28,5): error TS2416: Property 'removeListener' in type 'ServerMediaQueryList' is not assignable to the same property in base type 'MediaQueryList'.
[BUILD]   Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'.
[BUILD]     Types of parameters '_' and 'listener' are incompatible.
[BUILD]       Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'.
[BUILD]         Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(29,38): error TS2304: Cannot find name 'MediaQueryListEventMap'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(29,99): error TS2304: Cannot find name 'MediaQueryListEventMap'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,41): error TS2304: Cannot find name 'MediaQueryListEventMap'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,102): error TS2304: Cannot find name'MediaQueryListEventMap'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(44,15): error TS2416: Property '_registry' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
[BUILD]   Type 'Map<string, ServerMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
[BUILD]     Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.
[BUILD]       Types of property 'removeListener' are incompatible.
[BUILD]         Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'.
[BUILD]           Types of parameters '_' and 'listener' are incompatible.
[BUILD]             Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'.
[BUILD]               Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'.
[BUILD] 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'.
[BUILD]   Type '(query: string) => ServerMediaQueryList' is not assignable to type '(query: string) => MediaQueryList'.
[BUILD]     Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(56,67): error TS2304: Cannot find name 'MediaQueryListEvent'.
[BUILD]
[BUILD] 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'.
[BUILD]   Type 'Map<string, MockMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
[BUILD]     Type 'MockMediaQueryList' is not assignable to type 'MediaQueryList'.
[BUILD]       Types of property 'removeListener' are incompatible.
[BUILD]         Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'.
[BUILD]           Types of parameters '_' and 'listener' are incompatible.
[BUILD]             Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'.
[BUILD]               Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'.
[BUILD]                 Property 'handleEvent' is missing in type 'MediaQueryListListener'.
[BUILD] 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'.
[BUILD]   Type '(_: EventListenerOrEventListenerObject) => void' is not assignable to type '(listener: MediaQueryListListener) => void'.
[BUILD]     Types of parameters '_' and 'listener' are incompatible.
[BUILD]       Type 'MediaQueryListListener' is not assignable to type 'EventListenerOrEventListenerObject'.
[BUILD]         Type 'MediaQueryListListener' is not assignable to type 'EventListenerObject'.
[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(83,38): error TS2304: Cannot find name 'MediaQueryListEventMap'.
 Unable to find command [[BUILD] ERROR in node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(25,15)]
 Unable to find command [[BUILD]         Type '(_]
 Unable to find command [[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,5)]
 Unable to find command [[BUILD]   Type '(_]
 Unable to find command [[BUILD] node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(83,38)]

[xiaodongliang]

the same at my side. OSX 10.12.6. no clue with Google

[peterpro]

i've made pull request to fix this problem: #1935

TL;DR: use "@angular/flex-layout": "^6.0.0-beta.16"

(not .18 because of angular/flex-layout#831)

[peterpro]

@liorkesos #1935 fixes this one.

[arturovt]

Closing since this project doesn't use flex-layout anymore.