title: Angulay Flex Layout Custom break points don't work with SSR
body: <p>I need only two break points in Angular Flex Layout. So, I defined:</p>
  
  <pre><code>const CUSTOM_BREAKPOINTS: BreakPoint[] = [{
    alias: 'lg',
    mediaQuery: '(min-width: 700px)',
  }, {
    alias: 'sm',
    mediaQuery: '(max-width: 700px)',
  }];
  
  export function getCustomBreakpoints() {
    return CUSTOM_BREAKPOINTS;
  }
  
  @NgModule({
    providers: [{
      provide: BREAKPOINTS,
      useFactory: getCustomBreakpoints
    }]
  })
  export class AppModule { }
  </code></pre>
  
  <p>This works fine without Server Side Rendering. Once I enable it, my layout is no longer responsive. General rules are applied to build and run it as <a href="https://angular.io/guide/universal#build-and-run-with-universal" rel="nofollow noreferrer">here</a>.</p>
  
  <p>When I run this project with SSR, I'm always getting the layout layout with three central row section in the middle area instead of having all content in one column.</p>
  
  <p>Without my custom break points, Angular Flex Layout works correctly.</p>
  
  <p>So, my question, why did I implement incorrectly?</p>