Reputation: 941

Problem in flex-layout comes when ran ng serve

sorry I tried what this link say me to do but nothing got changed someone could help me pls. Console of error

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'. 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. 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/server-match-media.d.ts(31,38): error TS2304: Cannot find name 'MediaQueryListEventMap'. node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(31,99): error TS2304: Cannot find name 'MediaQueryListEventMap'. node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(32,41): error TS2304: Cannot find name 'MediaQueryListEventMap'. node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(32,102): error TS2304: Cannot find name 'MediaQueryListEventMap'. node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(46,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'. 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'. node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(58,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/match-media/server-match-media.d.ts(60,67): error TS2304: Cannot find name 'MediaQueryListEvent'.

Upvotes: 12

Answers (11)

Manish Kumar

Reputation: 15

Solved this issue for me by removing @angular/flex-layout from package.json

Try running

npm install @angular/[email protected]

Upvotes: 2

StarDrop9

Reputation: 168

I corrected the problem file, the 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 'low _ dash' and 'listener' are incompatible. The type of "listener" a parameter is not the same type as the "low _ dash" parameter. I replaced the "_" parameter with the keyword "this" and the script is now working and ng serve and ng build are compiling 100%.

Upvotes: 1

Arunsai B K

Reputation: 213

changing "rxjs": "~6.4.0" to "rxjs": "6.4.0" works for me I also updated the flex layout to latest version followed @RileyManda and @Vivek kumar worked for me

Upvotes: 1

RileyManda

Reputation: 2641

Inside your project: Remove/delete flex layout from your package.json then run:

npm update

followed by:

npm install @angular/flex-layout@latest --save

This is will automatically install the latest version of flex thats compatible with your angular material.

Upvotes: 8

Ahmed

Reputation: 158

In my case I uninstalled @angular/flex-layout It solved immediately the problem.

This happened after updating to angular 7 from v 6.2

Hope this will help.

Upvotes: 2

Zoha Irshad

Reputation: 467

For me this worked fine :

npm install @angular/[email protected] --save

Upvotes: 1

tyndo

Reputation: 43

I was also getting this

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

I resolved it by installing typescript version 2.9.1

Upvotes: 1

Gaurav pratap singh

Reputation: 11

its have some version related problem ,just run the command ng update all

Upvotes: 1

kinny94

Reputation: 374

I had the same issue. I am guessing that the new version of Flex Layout ^7.0.0-beta.19 is not completely compatible with the older version of angular i.e below 7. I ran ng-update --all and updated my typescript version to 3.1.3 and everything was running fine. You can get more information from here

Upvotes: 1

Vivek Kumar

Reputation: 5040

One time I had some similar issue with flex-layout and MatchMedia. Later after much debugging the culprit was rxjs.

So can you please check if you are not using semantic versioning for these package in your package.json file.

with the below, I was getting the error

"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.1",

Changing to this solves the issue

"rxjs": "6.2.2",
"rxjs-compat": "6.2.1",

Please give this a try and check

Upvotes: 4

Demon

Reputation: 941

I found a solution if someone having the same problems IDK if its the best to resolve but for me this works:

    npm install @angular/[email protected]

Upvotes: 17

Problem in flex-layout comes when ran ng serve

Answers (11)

Related Questions