title: angular/flex-layout not working with Angular 9
body: <p>I had setup a basic project with angular 9 , angular material and angular/flex-layout. How ever I cannot get angular/flex-layout working . Here is what I have done </p>
  
  <p>Login-view.component.ts</p>
  
  <pre><code>&lt;div class="container"  fxLayout="row" fxLayoutAlign="center center" &gt;
  
    &lt;mat-card class="login-box"&gt;
      &lt;mat-card-title&gt;Login&lt;/mat-card-title&gt;
      &lt;mat-card-content&gt;
        &lt;form #loginForm="ngForm" (ngSubmit)="login(loginForm)"&gt;
          &lt;p&gt;
            &lt;mat-form-field&gt;
              &lt;input type="text" name="username" matInput placeholder="Username" ngModel required /&gt;
            &lt;/mat-form-field&gt;
          &lt;/p&gt;
  
          &lt;p&gt;
            &lt;mat-form-field&gt;
              &lt;input type="password" name="password" matInput placeholder="Password" ngModel required /&gt;
            &lt;/mat-form-field&gt;
          &lt;/p&gt;
          &lt;div class="button"&gt;
            &lt;button type="submit" mat-button&gt;Login&lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/mat-card-content&gt;
    &lt;/mat-card&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>login-view.component.scss</p>
  
  <pre><code>mat-form-field{
      width: 100%;
  }
  
  .login-box{
      width : 30%;
  }
  
  .container {
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;
      height: 100%;
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { reducers } from './ngrx/app-reducer';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { MaterialModule } from './material/material.module';
  import { CoreModule } from './core/core.module';
  import { State, StoreModule } from '@ngrx/store';
  import { environment } from 'src/environments/environment';
  import { StoreDevtoolsModule  } from '@ngrx/store-devtools';
  import { EffectsModule } from '@ngrx/effects';
  import { StoreRouterConnectingModule, RouterState } from '@ngrx/router-store';
  import { metaReducers } from './ngrx/app-reducer'
  import { AuthModule } from './features/auth/auth.module';
  import { FlexLayoutModule } from '@angular/flex-layout';
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [  
      CoreModule,
      AuthModule,
      AppRoutingModule,
      MaterialModule,
      BrowserModule,
      BrowserAnimationsModule,
      FlexLayoutModule,
      StoreModule.forRoot(
        reducers, { 
          metaReducers,
          runtimeChecks:{
            strictStateImmutability:true,
            strictActionImmutability: true,
            strictActionSerializability:true,
            strictStateSerializability: true
          } 
        }
      ),
      StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
      // this is going to initialize the global services for ngrx and add them to the application
      EffectsModule.forRoot([]),
      StoreRouterConnectingModule.forRoot({
        stateKey: 'router',
        routerState:RouterState.Minimal
      })
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  </code></pre>
  
  <p>These are the packages I have installed</p>
  
  <pre><code>Package                           Version
  -----------------------------------------------------------
  @angular-devkit/architect         0.900.6
  @angular-devkit/build-angular     0.900.6
  @angular-devkit/build-optimizer   0.900.6
  @angular-devkit/build-webpack     0.900.6
  @angular-devkit/core              9.0.6
  @angular-devkit/schematics        9.0.6
  @angular/cdk                      9.1.2
  @angular/flex-layout              9.0.0-beta.29
  @angular/material                 9.1.2
  @ngtools/webpack                  9.0.6
  @schematics/angular               9.0.6
  @schematics/update                0.900.6
  rxjs                              6.5.4
  typescript                        3.7.5
  webpack                           4.41.2
  </code></pre>
  
  <p>Whenever i Use flex via css by applying it to the "container" class it works but not with angular-flex-layout. </p>