fxLayout and fxFlex directives have no effect

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"

[alexk111]

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

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