FxLayoutAlign with media queries only work after resizing window in a production build

[roldengarm]

Bug Report

What is the expected behavior?

fxLayoutAlign and media queries work regardless of production or development build mode, immediately without resizing the window.

What is the current behavior?

In a production build, I have to resize the window before the mediaqueries are applied correct.

What are the steps to reproduce?

See StackBlitz . I expect the button to only be stretched to 100% width on an xs resolution. However, when you open this Stackblitz on a larger screen, it still appears 100% width. Only when you resize the window, and then back, it appears correctly.

I did find out that if I add fxLayout to a media query as well, it works as expected. I.e. this works:

<div fxLayout.xs="column" fxLayoutAlign.xs="start stretch">
  <button>Next</button>
</div>

However I don't understand why.

What is the use-case or motivation for changing an existing behavior?

It is a bug that prevents me from using fxLayoutAlign and media queries.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

See StackBlitz for versions included.

Is there anything else we should know?

Great work on this library, it helps me a lot. Hopefully this can be fixed.