bug(fxLayout, universal): layout direction is wrong

[CaerusKaru]

When using Universal rendering, fxLayout gets picked up, but wrongly applied as flex-direction=row instead of flex-direction=column.

Confirmed that this only happens on the latest commit, which means a wire got crossed somewhere in the refactoring for NgClass and NgStyle (e461d17).

[ThomasBurleson]

There are known issues with current @angular/flex-layout + Universal

• Universal pre-rendered styles are not correct #373

Please provide an HTML code sample to verify your issue is different from #373.

[CaerusKaru]

@ThomasBurleson There are two reasons I didn't file this under #373:

1. The issues only cropped up for me after fix(api, class, style): remove deprecated selectors #419 was merged
2. That issue looked like it pertained exclusively to breakpoint management in Universal, whereas this issue is just a misapplied CSS styling for all cases

The HTML template looks like this:

<div fxFill fxLayout="column">
  <div class="nav-bar">
    <nav md-tab-nav-bar fxFlex>
        ... nav bar elements

and the top-level div gets rendered with the following CSS with Universal:

width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
display: flex;
box-sizing: border-box;
flex-direction: row;
-webkit-flex-direction: row;

There are no other fxFlex-related elements anywhere else in this template, though there is a <router-outlet> that inevitably contains other flex elements.

[ThomasBurleson]

@CaerusKaru - #419 fixed an performance/rendering issue where each/every class="" attribute created ClassDirective instance. Now only [ngClass] and [ngStyle] attributes will trigger ClassDirective or StyleDirective instantiations (respectively).

#419 is an issue with Universal when using the Responsive API. Your usage is with the Static API... which should render the correct CSS.

We will investigate.

[alirezamirian]

@CaerusKaru
Not sure this helps, but I had a similar issue, but when I tried to reproduce it, it turned out that the cause of the problem was an error somewhere else, not related to flex-layout! I don't know why flex-direction: row where applying instead of not working at all, and I didn't further investigate it.

[CaerusKaru]

@alirezamirian While I'd like to believe that it's an error on my end, and thus easily correctable, that doesn't explain why the rendering works with versions of flex-layout prior to PR #419

[CaerusKaru]

Here's the (revised) post-mortem on this issue. The issue only comes up when there is a fxFlex descendant of a fxLayout. This is because the fxFlex tries to mutate its parent if it doesn't already have a flex-direction set, and bases its own properties on this if it does exist.

In the process of performing this action, fxFlexBase depends on style-utils, which until this PR had blockers on its methods if it detected the current platform wasn't the browser. These blockers seemingly discouraged the usage of the private Angular getDOM() API, although it's unclear why this change was made.

In constructing the internal representation of the DOM for getDOM(), Angular detects the platform itself while building/bootstrapping, and each platform is responsible for implementing its own DOM adapter, including the server. Removing these checks seems to fix the issue, since fxFlexBase can now adequately detect whether or not its parent has the proper flex-direction before mutating.

I've sent in PR #466 to correct this.

[CaerusKaru]

Closed by 8dcae02

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}