typescript 运行 ng serve 时出现 flex-layout 的问题

Problem in flex-layout comes when ran ng serve

提问by Dieeu

sorry I tried what this linksay 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'.

node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(25,15) 中的错误：错误 TS2416：“MockMatchMedia”类型中的属性“ registry”不是可分配给基本类型“MatchMedia”中的相同属性。“地图”类型不能分配给“地图”类型。类型“MockMediaQueryList”不可分配给类型“MediaQueryList”。属性“removeListener”的类型不兼容。类型 '（: EventListenerOrEventListenerObject) => void' 不能分配给类型 '(listener: MediaQueryListListener) => void'。参数“_”和“侦听器”的类型不兼容。“MediaQueryListListener”类型不能分配给“EventListenerOrEventListenerObject”类型。“MediaQueryListListener”类型不能分配给“EventListenerObject”类型。“MediaQueryListListener”类型中缺少“handleEvent”属性。node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,5): 错误 TS2416: 'MockMediaQueryList' 类型的属性 'removeListener' 不可分配给基本类型“MediaQueryList”中的相同属性。类型 '（: EventListenerOrEventListenerObject) => void' 不能分配给类型 '(listener: MediaQueryListListener) => void'。参数类型 '' 和 'listener' 不兼容。“MediaQueryListListener”类型不能分配给“EventListenerOrEventListenerObject”类型。“MediaQueryListListener”类型不能分配给“EventListenerObject”类型。node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(83,38): 错误 TS2304: 找不到名称“MediaQueryListEventMap”。node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(83,99): 错误 TS2304: 找不到名称“MediaQueryListEventMap”。node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(84,41): 错误 TS2304: 找不到名称“MediaQueryListEventMap”。node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(84, 102)：错误 TS2304：找不到名称“MediaQueryListEventMap”。node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(95,67): 错误 TS2304: 找不到名称“MediaQueryListEvent”。node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,5): 错误 TS2416: 'ServerMediaQueryList' 类型的属性 'removeListener' 不可分配给相同的基本类型“MediaQueryList”中的属性。类型 '（'ServerMediaQueryList' 类型中的 removeListener' 不能分配给基本类型 'MediaQueryList' 中的相同属性。类型 '（'ServerMediaQueryList' 类型中的 removeListener' 不能分配给基本类型 'MediaQueryList' 中的相同属性。类型 '（: EventListenerOrEventListenerObject) => void' 不能分配给类型 '(listener: MediaQueryListListener) => void'。参数类型 '' 和 'listener' 不兼容。“MediaQueryListListener”类型不能分配给“EventListenerOrEventListenerObject”类型。“MediaQueryListListener”类型不能分配给“EventListenerObject”类型。node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(31,38)：错误 TS2304：找不到名称“MediaQueryListEventMap”。node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(31,99)：错误 TS2304：找不到名称“MediaQueryListEventMap”。node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(32,41)：错误 TS2304：找不到名称“MediaQueryListEventMap”。node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(32,102): 错误 TS2304：找不到名称“MediaQueryListEventMap”。node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(46,15): 错误 TS2416: 属性'类型“ServerMatchMedia”中的“registry”不能分配给基本类型“MatchMedia”中的相同属性。“地图”类型不能分配给“地图”类型。“ServerMediaQueryList”类型不能分配给“MediaQueryList”类型。属性“removeListener”的类型不兼容。类型 '（: EventListenerOrEventListenerObject) => void' 不能分配给类型 '(listener: MediaQueryListListener) => void'。参数“_”和“侦听器”的类型不兼容。“MediaQueryListListener”类型不能分配给“EventListenerOrEventListenerObject”类型。“MediaQueryListListener”类型不能分配给“EventListenerObject”类型。node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(58,15): 错误 TS2416: 'ServerMatchMedia' 类型的属性 '_buildMQL' 不可分配给相同的基本类型“MatchMedia”中的属性。类型 '(query: string) => ServerMediaQueryList' 不能分配给类型 '(query: string) => MediaQueryList'。“ServerMediaQueryList”类型不能分配给“MediaQueryList”类型。node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(60,67)：错误 TS2304：找不到名称“MediaQueryListEvent”。

回答by Dieeu

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

我找到了一个解决方案，如果有人遇到同样的问题 IDK 如果它是最好的解决方案，但对我来说这是有效的：

    npm install @angular/[email protected] 

回答by RileyManda

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

在您的项目中：从 package.json 中移除/删除 flex 布局，然后运行：

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.

这将自动安装与您的角度材料兼容的最新版本的 flex。

回答by Vivek Kumar

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

有一次我在 flex-layout 和MatchMedia. 后来经过多次调试，罪魁祸首是 rxjs。

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

所以你能不能检查一下你是否没有在 package.json 文件中为这些包使用语义版本控制。

with the below, I was getting the error

下面，我收到了错误

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

Changingto this solves the issue

改成这个可以解决问题

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

Please give this a try and check

请试一试并检查

回答by Ahmed

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

就我而言，我卸载了 @angular/flex-layout 它立即解决了问题。

This happened after updating to angular 7 from v 6.2

这是在从 v 6.2 更新到 angular 7 之后发生的

Hope this will help.

希望这会有所帮助。

回答by Manish Kumar

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

通过从 package.json 中删除@angular/flex-layout为我解决了这个问题

Try running

尝试跑步

npm install @angular/[email protected]

回答by Arunsai B K

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

将“rxjs”：“~6.4.0”更改为“rxjs”：“6.4.0”对我有用我还将flex布局更新为最新版本，随后@RileyManda和@Vivek kumar对我来说有效

回答by StarDrop9

I corrected the problem file, the node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(82,5):

我更正了问题文件，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%.

错误 TS2416：“MockMediaQueryList”类型中的属性“removeListener”不可分配给基本类型“MediaQueryList”中的相同属性。类型 '(: EventListenerOrEventListenerObject) => void' 不能分配给类型 '(listener: MediaQueryListListener) => void'。参数“low _ dash”和“listener”的类型不兼容。“listener”参数的类型与“low _ dash”参数的类型不同。我用关键字“this”替换了“_”参数，脚本现在正在运行，ng serve和ng build正在编译100%。

回答by Zoha Irshad

For me this worked fine :

对我来说，这很好用：

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

回答by kinny94

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

我遇到过同样的问题。我猜测新版本的 Flex Layout^7.0.0-beta.19与旧版本的 angular ie 低于 7 不完全兼容。我运行ng-update --all并更新了我的typescript版本3.1.3，一切都运行良好。您可以从这里获取更多信息

回答by Gaurav pratap singh

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

它有一些与版本相关的问题，只需运行命令 ng update all