Flexlayout not working with angular universal

Question

I have created an angular universal and pwa app. I am creating a navbar using mat-toolbar with flexlayout.

I have imported both FlexLayoutModule,FlexLayoutServerModule in my module.

My example navbar is

<div [hidden]="loading" class="example-container">
  <mat-toolbar class="example-toolbar">
    <span>Navigation</span>
    <span class="example-spacer"></span>
    <div fxShow fxHide.lt-md>
      <a href="#" mat-button>Menu Item 1</a>
      <a href="#" mat-button>Menu Item 2</a>
    </div>
    <div fxHide fxShow.gt-sm>
      <a href="#">Show Side Menu</a>
    </div>
  </mat-toolbar>
</div>

Answer 1

You have to import the FlexLayoutServerModule after the FlexLayoutModule.

 imports: [
    ... other imports here
    FlexLayoutServerModule
  ]

This import should happen in your ServerModule.

Here is a link that shows the proper use of the FlexLayoutModule with Angular Universal: https://github.com/angular/flex-layout/wiki/Using-SSR-with-Flex-Layout
As a note if you are including the FlexLayoutModule in a lazy loaded Module there still might be issues. Those issues should hopefully be resolved with the release of v6.