fxLayout=column get rendered as row in Angular 13 Universal

[vnistorica]

Bug Report

What is the expected behavior?

The result from universal of fxLayout="column", should be displaying the containers one under the other.

What is the current behavior?

They are displayed as row layout initially. After the javascript gets loaded the layout returns to the correct layout.

What are the steps to reproduce?

Add the following code, having Angular 13.2.2 and flex layout 13.0.0-beta.38.

<div fxLayoutGap="10px" fxLayout="column" fxFlexFill fxLayoutAlign="start stretch">
    <div style="padding: 100px; background-color: #00ccbc">Test</div>
    <div style="padding: 100px; background-color: #6d2275">Test</div>
    <div style="padding: 100px; background-color: #4f694c">Test</div>
    <div style="padding: 100px; background-color: #bb8d8d">Test</div>
</div>

Disable browser javascript to get the result of SSR.

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

Node: v16.13.2
Npm: 8.1.2
OS: linux x64

 "dependencies": {
    "@angular-material-extensions/password-strength": "~10.1.0",
    "@angular/animations": "~13.2.2",
    "@angular/cdk": "~13.2.2",
    "@angular/common": "~13.2.2",
    "@angular/compiler": "~13.2.2",
    "@angular/core": "~13.2.2",
    "@angular/flex-layout": "~13.0.0-beta.38",
    "@angular/forms": "~13.2.2",
    "@angular/localize": "~13.2.2",
    "@angular/material": "~13.2.2",
    "@angular/platform-browser": "~13.2.2",
    "@angular/platform-browser-dynamic": "~13.2.2",
    "@angular/platform-server": "~13.2.2",
    "@angular/router": "~13.2.2",
    "@nguniversal/express-engine": "^13.0.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "compression": "^1.7.4",
    "core-js": "^3.6.4",
    "express": "^4.15.2",
    "form-data": "^4.0.0",
    "luxon": "^2.2.0",
    "morgan": "^1.10.0",
    "ngx-cookie-service": "^13.0.0",
    "rxjs": "^6.6.3",
    "socket.io-client": "^4.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.3",
    "@angular/cli": "~13.2.3",
    "@angular/compiler-cli": "~13.2.2",
    "@angular/language-service": "~13.2.2",
    "@babel/core": "^7.16.5",
    "@nguniversal/builders": "^13.0.1",
    "@types/compression": "^1.7.2",
    "@types/express": "^4.17.0",
    "@types/facebook-js-sdk": "^3.3.0",
    "@types/gapi": "0.0.39",
    "@types/gapi.auth2": "0.0.51",
    "@types/googlemaps": "^3.39.3",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.8",
    "@types/luxon": "^2.0.8",
    "@types/node": "^13.9.0",
    "bufferutil": "^4.0.3",
    "codelyzer": "^6.0.2",
    "jasmine-core": "~3.10.1",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.9",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "^2.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~7.0.0",
    "source-map-explorer": "^2.5.2",
    "ts-node": "^8.6.2",
    "tslint": "~6.1.0",
    "typescript": "4.5.4",
    "utf-8-validate": "^5.0.5",
    "ws": "^7.4.6",
    "xhr2": "^0.2.1"
  }

Is there anything else we should know?

It works ok if I remove FlexLayoutServerModule from AppServerModule.

[tommueller]

Any status on this? What are the downsides to just not using FlexLayoutServerModule, other then the warning that is printed?

[bri1990]

We are experiencing the same bug.

Any status on this? What are the downsides to just not using FlexLayoutServerModule, other then the warning that is printed?

I was wondering the same thing, couldn't find the repercussions of doing this.?

[nikxco]

Any updates on the fix?