Flex layout not working on angular 5

Question

I'm trying to use flex-layout on angular 5 but it's not working.

This is my environment:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.6.1
Node: 9.3.0
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.3
@angular/cli: 1.6.1
@angular/flex-layout: 2.0.0-beta.12-67e4bf5
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

This is the import in app.module.ts:

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


@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
    SocialLoginModule,
    FlexLayoutModule
  ],

No error on compilation.

This is a test on a template:

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-1" fxFlex="15%">Item 1</div>
  <div class="item item-2" fxFlex="20%" fxFlexOrder="3">Item 2</div>
  <div class="item item-3" fxFlex>Item 3</div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0">
  <div class="item item-4" fxFlex fxFlexOffset="50px"  fxFlexOffset.xs="0">Item 4</div>
  <div class="item item-5" fxFlex="200px">Item 5</div>
</div>

This is the result (not what expected):

Why do you need a flex layout module? Does the CSS flexbox layout not work? — Pytth
– Pytth, Commented Jan 31, 2018 at 0:22
@Pytth the @angular/flex-layout module is implementing CSS Flexbox using Angular directives. — Brad
– Brad, Commented Jan 31, 2018 at 1:34
Please add a small reproduction of the issue in stackblitz or similar. — Jota.Toledo
– Jota.Toledo, Commented Jan 31, 2018 at 7:56

Mehdi Benmoha · Accepted Answer · 2020-06-02 15:23:19Z

31

You have to import FlexLayoutModule in every feature module. This is not the best solution, but a working one.

Importing and EXPORTING FlexLayoutModule in the SharedModule works like charm and is the best solution that respects the angular style guide, by the way the SharedModule is imported in every feature module.

For more information about the SharedModule: https://angular.io/guide/styleguide#shared-feature-module

Edit: I also wrote an article about SharedModule vs CoreModule if you can't see the difference between them: https://medium.com/@benmohamehdi/angular-best-practices-coremodule-vs-sharedmodule-25f6721aa2ef

edited Jun 2, 2020 at 15:23

answered Feb 6, 2018 at 15:50

Mehdi Benmoha

3,9853 gold badges25 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ceebreenk Over a year ago

Yes! Why is it not so obvious in the documentation that you have to import it into every feature module? Works perfectly in SharedModule.

LargeDachshund Over a year ago

Thank you! This is a case of a false negative or something. Absolutely no indication on screen/dev tools that flex-layout was missing! For anyone who has developed modules for secure areas, for instance, you'll need to add this module to it. The App.module is la donna mobile. I wish everything in the project would inherit from it. but, it don't work that way....

Worthy7 Over a year ago

Remember you need to export it from your SharedModule too ;)

Mehdi Benmoha Over a year ago

I just edited the answer to show in clear that you need both. Thanks for your feedback

Stephen Rauch · Accepted Answer · 2018-05-06 02:43:32Z

3

Add the following to the package.json file:

"@angular/flex-layout": "^6.0.0-beta.15",
"rxjs": "^6.1.0",
"@angular/cdk": "^6.0.0",
"rxjs-compat": "6.0.0-beta.1",

and run

npm install

edited May 6, 2018 at 2:43

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered May 6, 2018 at 2:22

Iron shield

3494 silver badges9 bronze badges

Comments

Md. Imrul Islam · Accepted Answer · 2020-05-21 09:31:31Z

-2

Install Flex Layout from npm: $ npm install @angular/flex-layout --save

Or with Yarn: $ yarn add @angular/flex-layout

Now import FlexLayoutModule in your app module

import { FlexLayoutModule } from "@angular/flex-layout";
@NgModule({
  imports: [
    BrowserModule,
    FlexLayoutModule
  ],
  // ...
})
export class AppModule {}

Flex Layout is now ready to be used in your templates.

edited May 21, 2020 at 9:31

answered Apr 7, 2018 at 15:01

Md. Imrul Islam

3182 silver badges6 bronze badges

1 Comment

MotKohn Over a year ago

TS2339: Property 'forRoot' does not exist on type 'typeof FlexLayoutModule'.

Collectives™ on Stack Overflow

Flex layout not working on angular 5

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related