Flex-layout producing errors with Angular 7

[bostondevin]

node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(62,22): error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(79,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(81,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@swimlane/ngx-ui/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/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(28,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@swimlane/ngx-ui/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/@swimlane/ngx-ui/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'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts(11,14): error TS2416: Property 'subscribe' in type 'ObservableMedia' is not assignable to the same property in base type 'Subscribable'.
Type '(next?: (value: MediaChange) => void, error?: (error: any) => void, complete?: () => void) => Subscription' is not assignable to type '{ (observer?: PartialObserver): Unsubscribable; (next?: (value: MediaChange) => void, error?: (error: any) => void, complete?: () => void): Unsubscribable; }'.
Types of parameters 'next' and 'observer' are incompatible.
Type 'PartialObserver' is not assignable to type '(value: MediaChange) => void'.
Type 'NextObserver' is not assignable to type '(value: MediaChange) => void'.
Type 'NextObserver' provides no match for the signature '(value: MediaChange): void'.

[2RajShaikh]

Facing same issue when updated to angular 7 and typescript 3.1.1

[marjan-georgiev]

We are upgrading the project to be compatible with Angular 7. A major version will be released soon.

[marjan-georgiev]

This should be fixed in 22.0.0. Please let me know if you still see issues.

[gmoro646]

The issue exists.

ERROR in node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(62,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(79,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(81,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'.
node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts(11,14): error TS2416: Property 'subscribe' in type 'ObservableMedia' is not assignable to the same property in base type 'Subscribable'.
Type '(next?: (value: MediaChange) => void, error?: (error: any) => void, complete?: () => void) => Subscription' is not assignable to type '{ (observer?: PartialObserver): Unsubscribable; (next?: (value: MediaChange) => void, error?: (error: any) => void, complete?: () => void): Unsubscribable; }'.
Types of parameters 'next' and 'observer' are incompatible.
Type 'PartialObserver' is not assignable to type '(value: MediaChange) => void'.
Type 'NextObserver' is not assignable to type '(value: MediaChange) => void'.
Type 'NextObserver' provides no match for the signature '(value: MediaChange): void'.

[marjan-georgiev]

Could you create a stackblitz where this can be reproduced? I can't reproduce locally.

[mohanramegowda]

We are upgrading the project to be compatible with Angular 7. A major version will be released soon.

When is the release date

[marjan-georgiev]

We are upgrading the project to be compatible with Angular 7. A major version will be released soon.

When is the release date

It should be fixed in 22.0.0. If you're still seeing it, please create a stackblitz, because I can not reproduce the issue.

[markzolotoy]

Is it fixed?

[marjan-georgiev]

Is it fixed?

Yes.

[skynolimits247]

10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.htmlchunk {main} main.js, main.js.map (main) 2 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 149 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 577 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 338 kB [initial] [rendered]
Date: 2019-07-24T16:27:36.560Z - Hash: 2bd9bfd66a211a473236 - Time: 15093ms

ERROR in ../node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts:62:22 - error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
Type 'MockMediaQueryList' is missing the following properties from type 'MediaQueryList': onchange, addEventListener, removeEventListener, dispatchEvent

62 export declare class MockMediaQueryList implements MediaQueryList {
~~~~~~~~~~~~~~~~~~
../node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts:79:27 - error TS2304: Cannot find name 'MediaQueryListListener'.

79 addListener(listener: MediaQueryListListener): void;
~~~~~~~~~~~~~~~~~~~~~~
../node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts:81:23 - error TS2304: Cannot find name 'MediaQueryListListener'.

81 removeListener(_: MediaQueryListListener): void;
~~~~~~~~~~~~~~~~~~~~~~
../node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:12:22 - error TS2420: Class 'ServerMediaQueryList' incorrectly implements interface 'MediaQueryList'.
Type 'ServerMediaQueryList' is missing the following properties from type 'MediaQueryList': onchange, addEventListener, removeEventListener, dispatchEvent

12 export declare class ServerMediaQueryList implements MediaQueryList {
~~~~~~~~~~~~~~~~~~~~
../node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:29:27 - error TS2304: Cannot find name 'MediaQueryListListener'.

29 addListener(listener: MediaQueryListListener): void;
~~~~~~~~~~~~~~~~~~~~~~
../node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:31:23 - error TS2304: Cannot find name 'MediaQueryListListener'.

31 removeListener(_: MediaQueryListListener): void;
~~~~~~~~~~~~~~~~~~~~~~
../node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:43: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 missing the following properties from type 'MediaQueryList': onchange, addEventListener, removeEventListener, dispatchEvent

43 protected _registry: Map<string, ServerMediaQueryList>;
~~~~~~~~~
../node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:55: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'.

55 protected _buildMQL(query: string): ServerMediaQueryList;
~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **i ｢wdm｣: Failed to compile.

[skynolimits247]

I am getting this error while upgrading from Angular 6 to Angular 8

[skynolimits247]

"devDependencies": {
"@angular-devkit/build-angular": "^0.801.2",
"@angular/cli": "^8.0.0",
"@angular/compiler-cli": "^8.0.0",
"@angular/language-service": "^8.0.0",
"@angularclass/hmr": "^2.1.3",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.2.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.12.0",
"protractor": "^6.0.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "3.4.5"
}

[marjan-georgiev]

@skynolimits247 I think there was a breaking change in one of the @angular/flex-layout versions. Please take a look at their changelog and update your code accordingly.

[skynolimits247]

Thanks !!

[nickhilll01]

chunk {main} main.js, main.js.map (main) 2.02 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 689 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 161 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 339 kB [initial] [rendered]
Date: 2020-04-10T07:26:22.420Z - Hash: fe74c25f00239c35cfe4 - Time: 7229ms

ERROR in node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts:26: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 missing the following properties from type 'MediaQueryList': onchange, addEventListener, removeEventListener, dispatchEvent

26 protected _registry: Map<string, MockMediaQueryList>;
~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts:66:22 - error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
Type 'MockMediaQueryList' is missing the following properties from type 'MediaQueryList': onchange, addEventListener, removeEventListener, dispatchEvent

66 export declare class MockMediaQueryList implements MediaQueryList {
~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts:83:27 - error TS2304: Cannot find name 'MediaQueryListListener'.

83 addListener(listener: MediaQueryListListener): void;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts:85:23 - error TS2304: Cannot find name 'MediaQueryListListener'.

85 removeListener(_: MediaQueryListListener): void;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:12:22 - error TS2420: Class 'ServerMediaQueryList' incorrectly implements interface 'MediaQueryList'.
Type 'ServerMediaQueryList' is missing the following properties from type 'MediaQueryList': onchange, addEventListener, removeEventListener, dispatchEvent

12 export declare class ServerMediaQueryList implements MediaQueryList {
~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:29:27 - error TS2304: Cannot find name 'MediaQueryListListener'.

29 addListener(listener: MediaQueryListListener): void;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:31:23 - error TS2304: Cannot find name 'MediaQueryListListener'.

31 removeListener(_: MediaQueryListListener): void;
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:43: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 missing the following properties from type 'MediaQueryList': onchange, addEventListener, removeEventListener, dispatchEvent

43 protected _registry: Map<string, ServerMediaQueryList>;
~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts:55: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'.

55 protected _buildMQL(query: string): ServerMediaQueryList;
~~~~~~~~~

[Hypercubed]

flex-layout will be removed in the next release.

[nickhilll01]

flex-layout will be removed in the next release.

Till then , what to do with the problem ?

[Hypercubed]

@nickhilll01 Does the issue only show when using ng7 or ng8? I'm sorry but the next version will remove flex-layout and likely only support ng9. I suggest mograting to ng9.