Flex-layout: Angular 6 support

[aituganov]

Right now flex-layout uses incorrect submodule import from rxjs. It prevents us from upgrading app that uses Angular 5 to Angular 6.

Bug, feature request, or proposal:

Make flex-layout work with Angular 6.

What is the expected behavior?

Angular application that was upgraded to Angular 6 is served or built successfully.

What is the current behavior?

ERROR in node_modules/@angular/flex-layout/core/typings/match-media/match-media.d.ts(9,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@angular/flex-layout/core/typings/match-media/match-media.d.ts(10,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(2,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(3,10): error TS2305: Module '/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@angular/flex-layout/core/typings/media-monitor/media-monitor.d.ts(1,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts(1,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts(2,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts(2,22): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Observable"' has no exported member 'Subscribable'.
node_modules/@angular/flex-layout/core/typings/responsive-activation/responsive-activation.d.ts(8,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/@angular/flex-layout/extended/typings/show-hide/show-hide.d.ts(9,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/@angular/flex-layout/flex/typings/flex-offset/flex-offset.d.ts(11,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/@angular/flex-layout/flex/typings/flex/flex.d.ts(10,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/@angular/flex-layout/flex/typings/layout-align/layout-align.d.ts(10,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/@angular/flex-layout/flex/typings/layout-gap/layout-gap.d.ts(11,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/@angular/flex-layout/flex/typings/layout/layout.d.ts(10,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@angular/flex-layout/flex/typings/layout/layout.d.ts(11,10): error TS2305: Module '"/%PATH_TO_NODE_MODULES%/node_modules/rxjs/ReplaySubject"' has no exported member 'ReplaySubject'.
node_modules/rxjs/BehaviorSubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/BehaviorSubject'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/ReplaySubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/ReplaySubject'.
node_modules/rxjs/Subscription.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscription'.

[julianobrasil]

For now, install [email protected] (or 6.1) along with [email protected] (or 6.1).

[ishankhare07]

This issue also breaks the ng update tool - if you follow instructions from update.angular.io
Will installing the nightly build solve this problem?

[Boboss74]

You can try to remove @angular/flex-layout from your project before the ng update instructions
And add it once finished

[ishankhare07]

I tried manually fixing peer dependencies, and this is what worked for me

   "dependencies": {
-    "@angular/animations": "^5.2.10",
-    "@angular/cdk": "^5.2.5",
-    "@angular/common": "^5.2.0",
-    "@angular/compiler": "^5.2.0",
-    "@angular/core": "^5.2.0",
-    "@angular/flex-layout": "^5.0.0-beta.14",
-    "@angular/forms": "^5.2.0",
-    "@angular/http": "^5.2.0",
-    "@angular/material": "^5.2.5",
-    "@angular/platform-browser": "^5.2.0",
-    "@angular/platform-browser-dynamic": "^5.2.0",
-    "@angular/router": "^5.2.0",
-    "bootstrap": "^4.1.0",
+    "@angular/animations": "^6.0.0",
+    "@angular/cdk": "^6.0.1",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@angular/flex-layout": "^6.0.0-beta.15",
+    "@angular/forms": "^6.0.0",
+    "@angular/http": "^6.0.0",
+    "@angular/material": "^6.0.1",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0",
+    "@angular/router": "^6.0.0",
     "core-js": "^2.4.1",
-    "jquery": "^3.3.1",
-    "rxjs": "^5.5.6",
+    "rxjs": "^6.0.0",
+    "rxjs-compat": "^6.0.0",
     "zone.js": "^0.8.19"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "~0.6.0",
     "@angular/cli": "^6.0.0",
-    "@angular/compiler-cli": "^5.2.0",
-    "@angular/language-service": "^5.2.0",
+    "@angular/compiler-cli": "^6.0.0",
+    "@angular/language-service": "^6.0.0",
     "@types/jasmine": "~2.8.3",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
@@ -48,7 +48,6 @@
     "protractor": "~5.1.2",
     "ts-node": "~4.1.0",
     "tslint": "~5.9.1",
-    "typescript": "~2.5.3",
-    "@angular-devkit/build-angular": "~0.6.0"
+    "typescript": "^2.7.2"
    }

[CaerusKaru]

Duplicate of #693

[CaerusKaru]

@aituganov the 6.x release of Flex Layout is fully compatible with Angular 6 and RxJS 6

[dbykadorov]

@CaerusKaru how I can install it? Latest version seems like 5.0.0-beta.14

[h3imdall]

@dbykadorov this version works for me with angular 6.0.1
npm i --save @angular/[email protected]

[dbykadorov]

@h3imdall thank you! Looks like it working)

[DudeFN]

This works for me as well. Thanks a lot!!

[saleemmalikraja]

@aituganov : For angular 6.0.1 make sure you have exactly @angular/flex-layout": "6.0.0-beta.17" and not "@angular/flex-layout": "^6.0.0-beta.17" .
This will only happen when you delete the node_modules and on npm install will obviously take the latest of flex-layout which expect angular compiler and typescript version to its compatability...!

[jj-plane]

You can try to remove @angular/flex-layout from your project before the ng update instructions
And add it once finished

This was a life saver. Thanks!

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