Flex-layout: ERROR in node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts(1,22)

[alvipeo]

Just created a new project with CLI, added Material, etc. Then added flex-layout. Now this:

ERROR in node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts(1,22): error TS2724: Module '"E:/Documents/repos/UrekiNgx/node_modules/rxjs/Rx"' has no exported member 'Subscribable'. Did you mean 'Subscriber'?

?

[CaerusKaru]

What version of RxJS do you have installed?

[alvipeo]

"rxjs": "^5.5.8",
"zone.js": "^0.8.26"

[CaerusKaru]

Can you post the repo in question to GitHub?

[alvipeo]

https://github.com/alvipeo/flex-layout-not-working

[CaerusKaru]

Built locally with no issue. Closing unless there's a case I missed. I build locally, ran npm i and npm i @angular/flex-layout and then added FlexLayoutModule to app.module.ts. ng serve and ng build --prod both work flawlessly except for the warnings about TypeScript 2.8

[tccyp001]

saw the same issue...

[tccyp001]

looks like if use latest version("github:angular/flex-layout-builds") can see that issue, but if change to ^5.0.0-beta.14, it can build correctly.

[CaerusKaru]

That's because the nightly builds use RxJS v6. You can get around that by installing rxjs@forward-compat

[Tyler-V]

Encountered the same error.

npm i rxjs@forward-compat --save resolves the Subscribable however introduces

WARNING in C:/Users/Tyler/Documents/GitHub/tribot-app/node_modules/@angular/flex-layout/esm5/core.es5.js
289:43-49 "export 'inject' was not found in '@angular/core'

Downgrading to ^5.0.0-beta.14 as @tccyp001 suggested resolves all issues.

[tasos31]

Encountered this error, had ^5.0.0-beta.13, updated to ^5.0.0-beta.14 and I still face it.
My rxjs is: ^5.5.6
Also tried with rxjs@forward-compat and while the Subscribable error is gone, I get a wall of warnings just like @Tyler-V says

[JoannaG33]

I second @roneen31 . Followed the same steps and get a wall of the same errors as @Tyler-V. More on those here:

https://github.com/angular/material2/issues/10511

I also followed those steps and changed these versions:

"@angular/cdk": "^5.2.4",
"@angular/material": "^5.2.4",

Again, no luck. Seems like the only way now to use flex-layout is to upgrade to Angular 6?

[inthegarage]

Still happening flex-17 and rxjs 6.2.2 and Angular 6.1.6
Anyone any ideas here?

[alvipeo]

I run into similar issues with flex-layout from time to time. so I stopped using it completely. Just use CSS.

[inthegarage]

@alvipeo seems to be all to do with the latest rxjs 6.3.0 which I had automatically moved onto. Ensure you stick to 6.2.2. I love node, I really do.

[ghost]

"@angular/flex-layout": "^6.0.0-beta.17",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",

Still happens

[inthegarage]

@Shukarity Note you have ^6.2.2 and not ~6.2.2 or just 6.2.2 you are probably still downloading (and therefore using 6.3.0) please review your package.json

[ghost]

Did, works
Thanks :)

[inthegarage]

@CaerusKaru Can this issue be reopened again? It's failing with 6.3.0 and flex 17.
Thank you.

[CaerusKaru]

@inthegarage Please update to beta 18. And see #827 for details

[inthegarage]

Thanks @CaerusKaru as that requires (or seems to require TS 2.9) we'll have to take that route a little more carefully. I do get errors if I don't move to 2.9

[sushobitha]

@Shukarity Note you have ^6.2.2 and not ~6.2.2 or just 6.2.2 you are probably still downloading (and therefore using 6.3.0) please review your package.json

Thanks! It worked

[cicilalala]

saw the same problem too.

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

My package.json:

"@angular/animations": "^6.1.10",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/flex-layout": "^7.0.0-beta.19",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"@types/date-fns": "^2.6.0",
"core-js": "^2.5.4",
"date-fns": "^1.29.0",
"hammerjs": "^2.0.8",
"node-sass": "^4.9.4",
"rxjs": "~6.2.0",
"zone.js": "~0.8.26"

[sushobitha]

@cici change the flexlayout version to ~6.2.2

[emontezuma]

Hello all
I see this ticket is closed, but what is the final solution (if exists)?
I have the flex-layout version 7, and the issue persists..

[Jeklah]

I am getting this error as well.

"@angular/flex-layout": "^5.0.0-beta.15",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.4.0",
"typescript": "~3.2.2"

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