Flex-layout: fxLayout and fxFlex directives have no effect

[pauleustice]

Bug Report

Hi. After a few Typescript compilation issues after installing the npm package for the first time, I've found a few posts which suggested using 6.0.0-beta.17. This has removed the errors, but the directives don't work and I'm unable to use the library. I believe I have set everything up correctly.

What is the expected behavior?

fxLayout and fxFlex perform as they should, according to documentation

What is the current behavior?

The two directives mentioned have no discernible effect; no style attributes are added to the relevant elements and their layouts do not change.

What are the steps to reproduce?

Component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `
    <div fxLayout="row">
      <div fxFlex="50">
        <p>A1 ***</p>
      </div>
      <div fxFlex="50">
        <p>A2 ***</p>
      </div>
    </div>
    <div fxLayout="row">
      <div fxFlex>
        <p>B1 ***</p>
      </div>
      <div fxFlex>
        <p>B2 ***</p>
      </div>
    </div>
  `,
  styleUrls: [ './test.component.scss' ],
})
export class TestComponent {
  constructor () {}
}

App module:

import { FlexLayoutModule } from '@angular/flex-layout';

// Shortened for brevity
@NgModule({
  imports: [ FlexLayoutModule ]
})

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

OSX 10.14 Mojave
Google Chrome 69

Dependencies:

"@angular/cdk": "^6.4.5",
"@angular/common": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/flex-layout": "6.0.0-beta.17",
"rxjs": "^6.0.0"

Dev dependencies:

"@angular/cli": "^6.1.5",
"@angular/compiler-cli": "^6.1.0",
"typescript": "^2.8.3"

[waterskier2007]

I believe this is also present in 7.0.0-beta.19

[pauleustice]

So, is there a working version for Angular 6 (or 7), at the moment? Any help would be appreciated as I'd love to use this plugin imminently

[CaerusKaru]

Please provide a StackBlitz demo that exhibits this behavior so that we can investigate

[alexk111]

Had that issue. Guys, check if your feature module imports FlexLayoutModule.

[waterskier2007]

@alexk111 mine imports FlexLayoutModule

[alexk111]

@waterskier2007 Do you have a single app module or multiple feature modules?

[waterskier2007]

multiple modules, however FlexLayoutModule is imported into the main app module where the incorrect layout resides

[alexk111]

FlexLayoutModule should be imported into each module containing a component which uses fxLayout directives

[markbell2410]

Same same!!

Just for good measure, I have imported FlexLayoutModule into my root module, material.module and routing module, even though the Flex behaviour is expected in the app.component.

it doesn't respond.

https://angular-k2p2nx.stackblitz.io

@CaerusKaru

[CaerusKaru]

@markbell2410 In your example, the fxFlex directive is working as intended. If you can point out the part that you think isn't, and also provide a link to the StackBlitz source, I can investigate further.

In the meantime, for everyone else commenting on this thread, please be advised the a) Flex Layout of course works for tons of users, and b) we can never do anything without a demo, so if you add "me too" to something without context, we can't know what that context is.

I am committed to resolving this if this is actually an issue with the Flex Layout library, and not just a configuration issue with Angular itself.

[CaerusKaru]

And as an aside, the reason why the original demo doesn't constitute a real demo is because it is not a runnable application ("shortened for brevity" for example).

[markbell2410]

Thanks for the prompt response @CaerusKaru

For me, it seems the PEBCAK!

Yesterday, I faced the exact same issue as outlined by the OP, I could not get it to work at all.

Today, I cannot get it to fail.

Apologies 🙄

https://stackblitz.com/edit/angular-k2p2nx

[waterskier2007]

@CaerusKaru I withdraw my statement. My issue was related to some changes in angular material v7. Certain UI components changed the flexbox properties of their containers, and that was causing my layout issues.

[CaerusKaru]

Since @pauleustice hasn't replied with a demo and no one else can provide one, I'm closing this. We can reopen if a demo is provided.

[jetshot]

You need to import FlexLayoutModule on app module and to any feature module you plan to use it on, same with directives. The affected are those who uses the Lazy Load Feature on their application.

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