Flex-layout: [resolved] RxJS 6.3.0 breaks angular flex layout

[skiabox]

I just tried to use rxjs 6.3.0 and it seems that it breaks angular flex-layout so I returned to RxJS 6.2.2

[bhundven]

ERROR in 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<MediaChange>'.
  Type '(next?: (value: MediaChange) => void, error?: (error: any) => void, complete?: () => void) => Sub...' is not assignable to type '{ (observer?: PartialObserver<MediaChange>): Unsubscribable; (next?: (value: MediaChange) => void...'.
    Types of parameters 'next' and 'observer' are incompatible.
      Type 'PartialObserver<MediaChange>' is not assignable to type '(value: MediaChange) => void'.
        Type 'NextObserver<MediaChange>' is not assignable to type '(value: MediaChange) => void'.
          Type 'NextObserver<MediaChange>' provides no match for the signature '(value: MediaChange): void'.

Same, also reverted to 6.2.2 to fix the build.

[lexcaraig]

@skiabox what version of @angular/flex-layout are you using? Bec, I'm getting the same error. Thanks.

[CaerusKaru]

So here's the rub: RxJS v6.3 introduced a change to the Subscribable interface, which is what ObservableMedia extends. As a result, the type errors you've all been getting have surfaced leading to the bad builds.

I've patched this in #828 and once it gets merged we will cut the beta 18 release (likely early tomorrow). Apologies to everyone for the inconvenience. The workaround until then is to downgrade RxJS to v6.2.

[CaerusKaru]

Although this issue is fixed, I'm going to reopen it until the new release has been published for visibility.

[x7even]

Can confirm and thanks for the quick fix in. #828

[vuthanhvien]

Thank for this, I still waiting for the the new release has been published

[dale-french]

I am having the same issue with rxjs at 6.2.2 and flex-layout at 6.0.0-beta.16

ERROR in node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts(11,14): error TS2416: Property 'subscribe' in type 'ObObservableMedia' is not assignable to the same property in base type 'Subscribable<MediaChange>'.

[bloodymind]

I've updated rxjs to 6.3 and Typescript to 2.9 but still not working, tried also downgrading to 6.0.0-beta.16 but still not working.

Seems like the fix is not released yet! Any update on this issue please ?

[sahilt75]

@bloodymind I updated to rxjs 6.3 and then downgraded again to rxjs 6.0.0. Weird but it worked for me

[mkginfo]

@sahilt75, Please share all dependencies and devDependencies

[CaerusKaru]

Version 6.0.0-beta.18 has been published on NPM. Please update to resolve this issue.

[jgeiger-cr]

With the beta.18 release I now see this error:

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.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(80,1): error TS1128: Declaration or statement expected.

[jrosseel]

+1. Same issue as jgeiger-cr

[CaerusKaru]

Please provide a minimal reproduction, I'm not seeing this on our internal tests. Also please try a clean uninstall/reinstall.

[jgeiger-cr]

Sorry, I'm using TS ~2.7.2, Angular ^6.1.6, and already tried a fresh NPM install.

[dale-french]

Not sure if it's related to the same issue but I did a clean install with npm instead of Yarn and it built fine

[CaerusKaru]

I just installed it successfully on our StackBlitz online (tried with both TS 2.7.2 and TS 2.9.2). If you're facing an install/build issue after upgrading, it's likely the install step didn't work correctly.

[sheariley]

after updating the version number for flex-layout in package.json, the following worked for me:
npm install reinstall @angular/flex-layout

P.S. I kept RXJS @ 6.3.1 and it still worked

[jgeiger-cr]

4 of our developers independently see the same problem with fresh NPM installs on Macs, Windows, Linux. Even IntelliJ sees the errors in node_modules/@angular/flex-layout/extended/typings/style/style.d.ts

[CaerusKaru]

Ok I see it now. The import syntax is new for TS, and only works with TS 2.9. The workaround is to bump to TS 2.9 as well while we consider options internally.

However, it might be the case that this is the terminal stage in our support for TS 2.7 (ie if you want to use RxJS 6.3, you also need to bump to TS 2.9).

[jgeiger-cr]

Excellent, thanks very much for your help.

[sahilt75]

@mkginfo
"dependencies": {
"@angular/animations": "^6.0.6",
"@angular/cdk": "^6.2.1",
"@angular/common": "^6.0.3",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",
"@angular/flex-layout": "^6.0.0-beta.15",
"@angular/forms": "^6.0.3",
"@angular/http": "^6.0.3",
"@angular/material": "^6.2.1",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
"@angular/router": "^6.0.3",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular/compiler-cli": "^6.0.3",
"@angular-devkit/build-angular": "~0.6.8",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.8",
"@angular/language-service": "^6.0.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": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}

[Polyterative]

"However, it might be the case that this is the terminal stage in our support for TS 2.7 (ie if you want to use RxJS 6.3, you also need to bump to TS 2.9)."
So if I use Angular 6 (which currently uses Ts 2.7.2) I can only stick with 6.2.2? Correct?

[CaerusKaru]

@Polyterative Angular v6.1.x is compatible with TypeScript v2.9

[Polyterative]

That's right, found out just now

[sudiddo]

in my case, using "@angular/flex-layout": "6.0.0-beta.16", solve the problem

[lihaibh]

@sudiddo it didnt fix the problem for me.
Can you share your package.json file?

[nigtas]

Anyone has some other solutions? I am using Angular 6.1.6, rxjs 6.3.1, typescript 2.9.2, flex 6.0.0-beta.18.
Tried all the suggestions from here, cannot make it build on --prod build...

Seems like the only difference between ObservableMedia and Subscribable is the return type os method subscribe... In flex it returns Subscription, while in rxjs is Unsubscribable

[sudiddo]

"dependencies": {
"@angular/animations": "^6.1.6",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.6",
"@angular/compiler": "^6.1.6",
"@angular/core": "^6.1.6",
"@angular/flex-layout": "6.0.0-beta.16",
"@angular/forms": "^6.1.6",
"@angular/http": "^6.1.6",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.6",
"@angular/platform-browser-dynamic": "^6.1.6",
"@angular/router": "^6.1.6",
"@ngrx/store": "^6.1.0",
"apollo-angular": "^1.1.2",
"apollo-angular-link-http": "^1.1.1",
"apollo-cache-inmemory": "^1.2.5",
"apollo-client": "^2.3.5",
"apollo-link-context": "^1.0.8",
"core-js": "^2.5.7",
"es6-promise": "^4.2.4",
"graphql": "^14.0.0",
"graphql-tag": "^2.9.2",
"hammerjs": "^2.0.8",
"moment": "^2.22.2",
"normalize.css": "^8.0.0",
"promise-polyfill": "^8.1.0",
"rxjs": "6.2.2",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.26"
},

this is my dependencies @lihaibh

[sudiddo]

@nigtas try to downgrade the rxjs to 6.2.2

[nigtas]

@sudiddo Thanks, but did not help...

[kgish]

This works for me:

angular 6.1.0
flex-layout: 6.0.0-beta.18
rxjs: 6.3.0
typescript 2.72

[JoeMellon]

Quickest fix I did for this was removing current then installing the specific versions of both @angular/[email protected] and [email protected].

[nigtas]

@JoeMellon Tried too, but not sure it helps (or some cache left after that many installations).

[lihaibh]

what if im using rxjs-compact? should i downgrade it too?

[rsuk]

@JoeMellon solution worked for me (thanks) - with the addition for me of un-installing / installing [email protected] specifically.

[MathewBerg]

Forcing 6.0.0-beta.18 has resolved the issue for me.

[lihaibh]

@MathewBerg it shows me the error: node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(72,67): error TS1144: '{' or ';' expected.

[alobban]

I just executed ng update --force both @angular/core and @angular\material pulling in 6.1.6 and 6.4.6 respectively which also updated rxjs from 6.2.2 to 6.3.2. However, I received the error because I was running @angular/flex-layout version 6.0.0-beta.17.

Issue was resolved when I updated flex-layout to 6.0.0-beta.18.

[philgetz]

Like @jgeiger-cr, I also got this error after updating flex-layout to 6.0.0-beta.18

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.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(80,1): error TS1128: Declaration or statement expected.

By @CaerusKaru suggestion updating Typescript to 2.9 worked for me.

This is my working setup after a clean npm install:

angular: 6.1.4
angular/material: 6.4.6
flex-layout: 6.0.0-beta.18
rxjs: 6.3.0
typescript: 2.9.2 

Peer dependencies might likely have to be updated.

[MathewBerg]

I should add the versions that got a successful build:

angular/core: 6.1.6
angular/material: 6.4.7
angular/flex-layout: 6.0.0-beta.18
rxjs: 6.3.2
typescript: 2.9.2

[mazemaker]

@MathewBerg it helps, thanks.

[MaximGrischenko]

@mazemaker Hi, can you take your package.json? i have the same issue, thank you.

[mazemaker]

@MaximGrischenko

...
"dependencies": {
"@angular/animations": "^6.1.4",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/material": "^6.4.6",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"angular-typewriter": "0.0.15",
"core-js": "^2.5.4",
"rxjs": "^6.3.2",
"typed.js": "^2.0.9",
"typescript": "^2.9.2",
"zone.js": "~0.8.26"
},
...

[skiabox]

I can confirm since I am the topic starter that the problem is solved at least for rxjs v6.3.2 and flex-layout v6.0.0-beta.18

[alvipeo]

can someone confirm that it works with rxjs 6.3.3 ?

[philgetz]

@ngoswald11404 I am thinking it might be Typescript. Any one correct me if I'm wrong but try to update to 2.9, also typescript is a devDependency install with --save-dev.

[JoeMellon]

@ngoswald11404 Why do you have the upper carets before the package versions? this is basically telling it to go off and fetch the latest version regardless of what you have specified there.

[ngoswald11404]

@JoeMellon It is fetching from a repository in a cloud, via our company not the node repository. This could be the issue for me. They probably updated our typescript version and it only works in dev because of the package-lock.json so, thanks for the insight!

[odahcam]

@alvipeo It is working with rxjs@^6.3.2 + @angular/flex-layout@^6.0.0-beta.18.

[waveminded]

just upgraded still getting the error
rxjs@^6.3.2
@angular/flex-layout@^6.0.0-beta.18

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.
node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(80,1): error TS1128: Declaration or statement expected.

UPDATE *
Whoopsies....
just noticed my Typescript was at 2.7.2, upgraded to 2.9.2 and fixed the issue!

[mariamtsartsidze]

The same for me...

rxjs@^6.3.2

angular/flex-layout@^6.0.0-beta.18

Just have got 2.7.2 of typescript instead of 2.9.2 (can it be the reason?), but can't reinstall it. More concretely, I've installed and when I type

tsc -v

in command line, it shows 2.9.2, but using

ng version

it shows

typescript 2.7.2

both, globally and locally. If anyone can help, that will be appreciated.

[waveminded]

@mariamtsartsidze I changed this version in package.json from 2.7.2 to 2.9.2
"typescript": "~2.9.2"
then run npm install

[mariamtsartsidze]

It worked. Now it's compiled successfully. Thanks a lot!

[pulidovpe]

I changed typescript from ~2.7.2 to ~2.9.2
then run npm install and it's working for me!

[Seh83]

Here are the steps to resolve the issue:

1. Go to package.json, and downgrade the rxjs to the following: "rxjs": "6.2.2"
2. Delete the node_mouldes folder
3. Run npm install

This should fix the issue; and your project should compile and run again.

--- Sehul Viras

[odahcam]

@Seh83 using the LTS version of both packages shows no problem, a downgrade is not needed anymore.

[ghost]

This issue is solved in #831

[pdemilly]

Not for me. ng -build --prod produce that error

Angular CLI: 6.2.1
Node: 8.9.1
OS: linux x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.8.1
@angular-devkit/build-angular 0.8.1
@angular-devkit/build-optimizer 0.8.1
@angular-devkit/build-webpack 0.8.1
@angular-devkit/core 0.8.1
@angular-devkit/schematics 0.8.1
@angular/cdk 6.4.7
@angular/cli 6.2.1
@angular/fire 5.0.0
@angular/flex-layout 6.0.0-beta.18
@angular/material 6.4.7
@ngtools/webpack 6.2.1
@schematics/angular 0.8.1
@schematics/update 0.8.1
rxjs 6.3.2
typescript 2.9.2
webpack 4.18.1

[ghost]

Sorry, I don't have any idea about how it works on Linux OS. Did you try
the solution in #831.

On Sat, 15 Sep 2018, 9:15 pm Pascal DeMilly, [e-mail]
wrote:

Not for me. ng -build --prod produce that error

Angular CLI: 6.2.1
Node: 8.9.1
OS: linux x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version

@angular-devkit/architect 0.8.1
@angular-devkit/build-angular 0.8.1
@angular-devkit/build-optimizer 0.8.1
@angular-devkit/build-webpack 0.8.1
@angular-devkit/core 0.8.1
@angular-devkit/schematics 0.8.1
@angular/cdk 6.4.7
@angular/cli 6.2.1
@angular/fire 5.0.0
@angular/flex-layout 6.0.0-beta.18
@angular/material 6.4.7
@ngtools/webpack 6.2.1
@schematics/angular 0.8.1
@schematics/update 0.8.1
rxjs 6.3.2
typescript 2.9.2
webpack 4.18.1

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/flex-layout/issues/827#issuecomment-421589259,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AjS-xsmV8aFIWFnEeqE8xV0PixGXnA9Qks5ubSCMgaJpZM4WTslk
.

[odahcam]

Try ng update --all

[bostondevin]

locking rxjs at 6.6.2 worked for me with everything else up to date (disregarding typescript at 2.9.2 still)

[codemonkey00]

I updated from Angular 5 to 6 and can't get flex-layout working. I've been going through this list of versions and can't seem to get a combination that works. I'm using systemjs and get the error: Unexpected token < Evaluating .../node_modules/@angular/flex-layout/bundles/flex-layout.umd.js/core . It works if I bundle it, but not through systemjs.

package.json
"dependencies": { "@angular/animations": "6.1.7", "@angular/cdk": "6.4.7", "@angular/cli": "1.7.3", "@angular/common": "6.1.7", "@angular/compiler": "6.1.7", "@angular/compiler-cli": "6.1.7", "@angular/core": "6.1.7", "@angular/flex-layout": "6.0.0-beta.18", "@angular/forms": "6.1.7", "@angular/http": "6.1.7", "@angular/material": "6.4.7", "@angular/platform-browser": "6.1.7", "@angular/platform-browser-dynamic": "6.1.7", "@angular/platform-server": "6.1.7", "@angular/router": "6.1.7", "@angular/upgrade": "6.1.7", "animate.css": "3.7.0", "bootstrap": "3.3.7", "classlist.js": "1.1.20150312", "core-js": "2.5.7", "glob": "7.1.2", "intl": "1.2.5", "jquery": "3.3.1", "rxjs": "6.3.2", "rxjs-compat": "6.3.2", "systemjs": "0.21.4", "typescript": "2.9.2", "web-animations-js": "2.3.1", "zone.js": "0.8.26" }

systemjs.config.js
`(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',

        // angular bundles
        '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
        '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        "@angular/platform-server": 'npm:@angular/platform-server/bundles/platform-server.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
        '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

        //cdk
        '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js', 
        '@angular/cdk/a11y': 'npm:/@angular/cdk/bundles/cdk-a11y.umd.js',
        '@angular/cdk/accordion': 'npm:/@angular/cdk/bundles/cdk-accordion.umd.js',
        '@angular/cdk/bidi': 'npm:/@angular/cdk/bundles/cdk-bidi.umd.js',
        '@angular/cdk/coercion': 'npm:/@angular/cdk/bundles/cdk-coercion.umd.js',
        '@angular/cdk/collections': 'npm:/@angular/cdk/bundles/cdk-collections.umd.js',
        '@angular/cdk/keycodes': 'npm:/@angular/cdk/bundles/cdk-keycodes.umd.js',
        '@angular/cdk/layout': 'npm:/@angular/cdk/bundles/cdk-layout.umd.js',
        '@angular/cdk/observers': 'npm:/@angular/cdk/bundles/cdk-observers.umd.js',
        '@angular/cdk/overlay': 'npm:/@angular/cdk/bundles/cdk-overlay.umd.js',
        '@angular/cdk/platform': 'npm:/@angular/cdk/bundles/cdk-platform.umd.js',
        '@angular/cdk/portal': 'npm:/@angular/cdk/bundles/cdk-portal.umd.js',
        '@angular/cdk/scrolling': 'npm:/@angular/cdk/bundles/cdk-scrolling.umd.js',
        '@angular/cdk/stepper': 'npm:/@angular/cdk/bundles/cdk-stepper.umd.js',
        '@angular/cdk/table': 'npm:/@angular/cdk/bundles/cdk-table.umd.js',
        '@angular/cdk/text-field': 'npm:/@angular/cdk/bundles/cdk-text-field.umd.js',
        '@angular/cdk/tree': 'npm:/@angular/cdk/bundles/cdk-tree.umd.js',

        'jquery': 'npm:jquery/dist/jquery.js',
        'rxjs': 'npm:rxjs',
        'rxjs/operators': 'npm:rxjs/operators',
        'tslib': 'npm:tslib/tslib.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js', defaultExtension: 'js',
            meta: { './*.js': { loader: 'systemjs-angular-loader.js' } }
        },
        'rxjs': { main: 'index.js', defaultExtension: 'js' },
        'rxjs/operators': { main: 'index.js', defaultExtension: 'js' },
        'jquery': { defaultExtension: 'js' }            
    }
});

})(this);
`

[V5NEXT]

after updating the version number for flex-layout in package.json, the following worked for me:
npm install reinstall @angular/flex-layout

P.S. I kept RXJS @ 6.3.1 and it still worked

Did you replace the version of [email protected] and re-installed it?

[V5NEXT]

I updated from Angular 5 to 6 and can't get flex-layout working. I've been going through this list of versions and can't seem to get a combination that works. I'm using systemjs and get the error: Unexpected token < Evaluating .../node_modules/@angular/flex-layout/bundles/flex-layout.umd.js/core . It works if I bundle it, but not through systemjs.

package.json
"dependencies": { "@angular/animations": "6.1.7", "@angular/cdk": "6.4.7", "@angular/cli": "1.7.3", "@angular/common": "6.1.7", "@angular/compiler": "6.1.7", "@angular/compiler-cli": "6.1.7", "@angular/core": "6.1.7", "@angular/flex-layout": "6.0.0-beta.18", "@angular/forms": "6.1.7", "@angular/http": "6.1.7", "@angular/material": "6.4.7", "@angular/platform-browser": "6.1.7", "@angular/platform-browser-dynamic": "6.1.7", "@angular/platform-server": "6.1.7", "@angular/router": "6.1.7", "@angular/upgrade": "6.1.7", "animate.css": "3.7.0", "bootstrap": "3.3.7", "classlist.js": "1.1.20150312", "core-js": "2.5.7", "glob": "7.1.2", "intl": "1.2.5", "jquery": "3.3.1", "rxjs": "6.3.2", "rxjs-compat": "6.3.2", "systemjs": "0.21.4", "typescript": "2.9.2", "web-animations-js": "2.3.1", "zone.js": "0.8.26" }

systemjs.config.js
`(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',

        // angular bundles
        '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
        '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/flex-layout': 'npm:@angular/flex-layout/bundles/flex-layout.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        "@angular/platform-server": 'npm:@angular/platform-server/bundles/platform-server.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
        '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

        //cdk
        '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js', 
        '@angular/cdk/a11y': 'npm:/@angular/cdk/bundles/cdk-a11y.umd.js',
        '@angular/cdk/accordion': 'npm:/@angular/cdk/bundles/cdk-accordion.umd.js',
        '@angular/cdk/bidi': 'npm:/@angular/cdk/bundles/cdk-bidi.umd.js',
        '@angular/cdk/coercion': 'npm:/@angular/cdk/bundles/cdk-coercion.umd.js',
        '@angular/cdk/collections': 'npm:/@angular/cdk/bundles/cdk-collections.umd.js',
        '@angular/cdk/keycodes': 'npm:/@angular/cdk/bundles/cdk-keycodes.umd.js',
        '@angular/cdk/layout': 'npm:/@angular/cdk/bundles/cdk-layout.umd.js',
        '@angular/cdk/observers': 'npm:/@angular/cdk/bundles/cdk-observers.umd.js',
        '@angular/cdk/overlay': 'npm:/@angular/cdk/bundles/cdk-overlay.umd.js',
        '@angular/cdk/platform': 'npm:/@angular/cdk/bundles/cdk-platform.umd.js',
        '@angular/cdk/portal': 'npm:/@angular/cdk/bundles/cdk-portal.umd.js',
        '@angular/cdk/scrolling': 'npm:/@angular/cdk/bundles/cdk-scrolling.umd.js',
        '@angular/cdk/stepper': 'npm:/@angular/cdk/bundles/cdk-stepper.umd.js',
        '@angular/cdk/table': 'npm:/@angular/cdk/bundles/cdk-table.umd.js',
        '@angular/cdk/text-field': 'npm:/@angular/cdk/bundles/cdk-text-field.umd.js',
        '@angular/cdk/tree': 'npm:/@angular/cdk/bundles/cdk-tree.umd.js',

        'jquery': 'npm:jquery/dist/jquery.js',
        'rxjs': 'npm:rxjs',
        'rxjs/operators': 'npm:rxjs/operators',
        'tslib': 'npm:tslib/tslib.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js', defaultExtension: 'js',
            meta: { './*.js': { loader: 'systemjs-angular-loader.js' } }
        },
        'rxjs': { main: 'index.js', defaultExtension: 'js' },
        'rxjs/operators': { main: 'index.js', defaultExtension: 'js' },
        'jquery': { defaultExtension: 'js' }            
    }
});

})(this);
`

I manually changed the typescript version in angular.json file to 2.9.2 and run npm install, it fixed me the issue. May be it was with the TS version.

https://stackoverflow.com/questions/52421513/angular6-flex-layout-not-working-after-migrating-from-angular5?noredirect=1#comment91786958_52421513

[heavyrick]

i had the same issue, so i uninstalled version 6.0.0-beta.18 and install de version 6.0.0-beta.16 and solve the problem o/

[Twechy]

@alvipeo It is working with rxjs@^6.3.2 + @angular/flex-layout@^6.0.0-beta.18.

[maytanthegeek]

Works for me with following versions on Arch:
@angular/flex-layout: ^6.0.0-beta.18
rxjs: ^6.3.3
typescript: ~2.9.2

Thanks for the help everyone.

[germfy]

For me it worked on MacOS:
@angular/flex-layout: 6.0.0-beta.18
RxJS: 6.3.2
typescript: 2.9.2

[whitewaves]

@alvipeo
is it with current version of angular

[V5NEXT]

@whitewaves For me it was from migration which caused the issue as angular.json was not avaliable and had to manually change it from angular-cli.json. I think its a more of a angular-rxjs integration issue.

[Polyterative]

I was on flex 15 before, now the 18 compiles but my layouts are mostrly broken and wrong. Is this my fault? Do I need to fix everything by hand?

[ricardosaracino]

Works for me with following versions on Arch:
@angular/flex-layout: ^6.0.0-beta.18
rxjs: ^6.3.3
typescript: ~2.9.2

Thanks for the help everyone.

This needs more visibility

[Koesters]

 typescript: ~2.9.2
"@angular/animations": "^6.1.10",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.10",
"@angular/compiler": "^6.1.10",
"@angular/core": "^6.1.10",
"@angular/flex-layout": "^7.0.0-beta.19",
"@angular/forms": "^6.1.10",
"@angular/http": "^6.1.10",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.10",
"@angular/platform-browser-dynamic": "^6.1.10",
"@angular/router": "^6.1.10",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.1.0",

Windows 10 under cmder worked for me
ricardosaracino solution compiled but threw the errors in the browser (Chrome),

I then tried npm install rxjs-compat@latest

and then it broke again.

I had then to do

npm install [email protected]

and downgrade flexlayout again to

npm install @angular/[email protected]

"@angular/flex-layout": "^7.0.0-beta.19", remains now a no go area

I run Cesium in angular the procedure leaves me with a 90% Frame rate loss on Dual Titan Maxwell. From 60 fps to 6.

Deleting two mat tables increases the performance.

[eyho]

I was on flex 15 before, now the 18 compiles but my layouts are mostrly broken and wrong. Is this my fault? Do I need to fix everything by hand?

Same happened to me this afternoon. Should I just put everything back to beta.15 and wait for a long term fix, what do you think?

Using 6.2.2 rxjs with ~2.9.2 TS and 6.0.0-beta.15 flex-layout solves the error and the broken layout also.

[CaerusKaru]

Now that it's been a good three weeks since this has cropped up, I'm going to close this issue. I hope it helped everyone who came across it resolve any issues with their app.

I'd also like to apologize to those people who ran into issues repeatedly, I know this hurts the user experience and is not ideal. In the future, we'll probably look into scoping TypeScript version distributions in package.json, but this may be a little ways out in terms of development.

[dhantoot]

For me it worked on MacOS:
@angular/flex-layout: 6.0.0-beta.18
RxJS: 6.3.2
typescript: 2.9.2

this worked for me too !

[malinka007]

Flex-layout in versions 7.0.0-beta.20 and higher replaced ObservableMedia with MediaObserver.

"media-observer: ObservableMedia is now deprecated in anticipation of RxJS v7. The new API is called MediaObserver, and provides the exact same functionality as ObservableMedia, except you cannot directly subscribe to it,
Developers should subscribe to MediaObserver's media$ property; in place of subscribing directly to ObservableMedia." taken from https://github.com/angular/flex-layout/blob/master/CHANGELOG.

After I made that change, it worked with no issues on the latest versions as of today:
"@angular/core": "^7.1.1",
"@angular/flex-layout": "^7.0.0-beta.23",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.3.3",

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