Can't bind to 'fxFlex' since it isn't a known property of 'div'

I followed instruction below to install angular Flex-layout and i get following error of unhandled Promise rejection:

Template parse errors: Can't bind to 'fxFlex' since it isn't a known property of 'div'.

I used following

$ npm install @angular/flex-layout --save 

followed by in app.module.ts

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

@NgModule({
  imports: [
    BrowserModule,
    FlexLayoutModule,
    .....
  ],
  // ...
})
export class AppModule {}

in my html:

<div class="flexDemoContainer">
  <div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlex>
    <div fxFlex> I'm above on mobile, and left on larger devices. </div>
    <div fxFlex> I'm below on mobile, and right on larger devices. </div>
  </div>
</div>

Edit: Adding partial imports in component code

import { Component,  ViewEncapsulation, OnInit, ViewChild, HostListener, 
OnDestroy, EventEmitter } from '@angular/core';

import { Response } from '@angular/http';

import { ActivatedRoute, Router } from '@angular/router';

import { Subscription, Observable } from 'rxjs/Rx';

import { MdSidenav } from "@angular/material";


@Component({
    selector: '....-book',
    templateUrl: '....-book.component.html',
    encapsulation: ViewEncapsulation.None
})
export class BookComponent implements OnInit, OnDestroy {

    @ViewChild('filtersSidenav') filtersSidenav: MdSidenav;
    @ViewChild('chatSidenav') chatSidenav: MdSidenav;
    @ViewChild('tabGroup') tabGroup;

    .....
}

Note: Material 2 related components work and not the flex-layout. Not sure if I need to import flex related stuff in component.