title: Flex layout not working on angular 5
body: <p>I'm trying to use flex-layout on angular 5 but it's not working.</p>
  
  <p>This is my environment:</p>
  
  <pre><code>    _                      _                 ____ _     ___
     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                 |___/
  
  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
  </code></pre>
  
  <p>This is the import in app.module.ts:</p>
  
  <pre><code>import {FlexLayoutModule} from "@angular/flex-layout";
  
  
  @NgModule({
    imports: [
      BrowserModule,
      HttpClientModule,
      AppRoutingModule,
      FormsModule,
      ReactiveFormsModule,
      MaterialModule,
      SocialLoginModule,
      FlexLayoutModule
    ],
  </code></pre>
  
  <p>No error on compilation.</p>
  
  <p>This is a test on a template:</p>
  
  <pre><code>&lt;div class="container"
       fxLayout
       fxLayout.xs="column"
       fxLayoutAlign="center"
       fxLayoutGap="10px"
       fxLayoutGap.xs="0"&gt;
    &lt;div class="item item-1" fxFlex="15%"&gt;Item 1&lt;/div&gt;
    &lt;div class="item item-2" fxFlex="20%" fxFlexOrder="3"&gt;Item 2&lt;/div&gt;
    &lt;div class="item item-3" fxFlex&gt;Item 3&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"
       fxLayout
       fxLayout.xs="column"
       fxLayoutAlign="center"
       fxLayoutGap="10px"
       fxLayoutGap.xs="0"&gt;
    &lt;div class="item item-4" fxFlex fxFlexOffset="50px"  fxFlexOffset.xs="0"&gt;Item 4&lt;/div&gt;
    &lt;div class="item item-5" fxFlex="200px"&gt;Item 5&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the result (not what expected):</p>
  
  <p><a href="https://i.stack.imgur.com/0FiIi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0FiIi.png" alt="enter image description here"></a></p>