fxLayoutGap not working with Angular Universal

[tommueller]

Bug Report

What is the expected behavior?

When using fxLayoutGap, the calculated margins should be added to the DOM also in Angular Universal.

What is the current behavior?

Currently this for example, does not add a margin right to the first child, when rendered from Angular Universal. When JS is finished loading, the margin exists.

What are the steps to reproduce?

<div fxLayout="row" fxLayoutGap="8px">
  <mat-icon fxFlex>link</mat-icon>
  <a href="someUrl">Link</a>
</div>

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

Angular CLI: 10.0.6
Node: 10.19.0
OS: linux x64

Angular: 10.0.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.6
@angular-devkit/build-angular     0.1000.6
@angular-devkit/build-optimizer   0.1000.6
@angular-devkit/build-webpack     0.1000.6
@angular-devkit/core              10.0.6
@angular-devkit/schematics        10.0.6
@angular/cdk                      10.1.3
@angular/cli                      10.0.6
@angular/flex-layout              10.0.0-beta.32
@angular/google-maps              10.2.0
@angular/material                 10.1.3
@ngtools/webpack                  10.0.6
@nguniversal/builders             10.0.2
@nguniversal/common               10.0.2
@nguniversal/express-engine       10.0.2
@schematics/angular               10.0.6
@schematics/update                0.1000.6
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

[CaerusKaru]

There's a good chance this was fixed by #1378. Can you build your app using the nightly builds and confirm?

[tommueller]

I won't get to this before next week. Will test then and let you know!