Flex-layout: fxLayoutWrap not working with Angular Universal

[naveedahmed1]

When using fxLayoutWrap with Server Side Rendering, all elements are always shown in one row. With 2.0.0-beta.9 it was working perfectly but its broken in latest nightly update.

[mackelito]

Could you paste your code as well?

[naveedahmed1]

Please test the below code with Server Side Rendering and observe the initial load, before preboots sync the changes.
It will show all items in one row, and when preboots syncs the changes, its properly formatted. It was working perfectly with last beta.

<div fxLayout fxLayoutWrap class="table-grid touched">
    <div fxFlex.xs="50%" fxFlex="20%">  Item 1          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 1 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 2          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 2 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 3          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 3 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 4          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 4 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 5          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 5 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 6          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 6 Value    </div>
</div>

[CaerusKaru]

Might be fixed by #466. The latest beta of angular/flex-layout blocked certain methods from being used with Universal, and that PR reverses that change. If/when that PR gets merged, pull the latest nightly build and see if that fixes it.

[CaerusKaru]

As a side note, the fxLayoutWrap API has been marked as deprecated, so you may want to explore other formatting options for future use.

[naveedahmed1]

Can you please also share, what are the alternatives to fxLayoutWrap?

[CaerusKaru]

@naveedahmed1 The deprecation notice is listed here: https://github.com/angular/flex-layout/blob/cc12733062c363c4121165877227782b7e80570e/src/lib/api/flexbox/layout-wrap.ts#L25-L35

As shown on the fxLayout section of the Wiki page, you can add a second argument to fxLayout to add a wrap (not adding this argument defaults to no wrap).

So, in your case, you would change fxLayout fxLayoutWrap to fxLayout="row wrap". The documentation is lacking on wrap options, but they are alpha-equivalent to those for flex-wrap CSS:
reverse | wrap-reverse | reverse-wrap | no | none | nowrap | wrap

[naveedahmed1]

Thank you so much @CaerusKaru , its awesome :)

[CaerusKaru]

@naveedahmed1 The fixes from #466 have been merged into the latest nightly build. Does that fix your problem?

[naveedahmed1]

Yes, its fixed now. Thank you!

[CaerusKaru]

Great, this issue can be closed.

[naveedahmed1]

@CaerusKaru I think the latest nightly build has introduced this issue again. Can you please check?

Please also confirm if support for fxLayoutWrap has been removed? I had to update
fxLayout fxLayoutWrap with fxLayout="row wrap".

[CaerusKaru]

Please provide a minimal reproduction repo that I can confirm. fxLayoutWrap has been removed in the latest nightly build.

[naveedahmed1]

Can you please try below with SSR enabled and observe the behavior. Before the client side code takes control all blocks are shown in one row when client side code is activated it is displayed correctly.

<div fxLayout="row wrap">
    <div fxFlex.xs="50%" fxFlex="20%">  Item 1          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 1 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 2          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 2 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 3          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 3 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 4          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 4 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 5          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 5 Value    </div>
    <div fxFlex.xs="50%" fxFlex="20%">  Item 6          </div>
    <div fxFlex.xs="50%" fxFlex="30%">  Item 6 Value    </div>
</div>

[CaerusKaru]

@naveedahmed1 In order to exactly replicate the conditions you're seeing, we need a repo to clone and test. Code snippets are insufficient.

[naveedahmed1]

@CaerusKaru thank you for your reply. Can you please check it with https://github.com/angular/universal-starter ?

• Add "@angular/flex-layout": "github:angular/flex-layout-builds", to packages.json
• Add the flex-layout module toapp.module
• Add above code to home component.

Run project using below command:
npm run build:ssr && npm run serve:ssr

try refreshing the page few times, and you will notice that before the client side code takes control all divs are shown in one row.

[CaerusKaru]

@naveedahmed1 Confirmed the issue, thanks for the detailed steps. Can you also tell me what was the last nightly build that this worked correctly?

[naveedahmed1]

I think 2.0.0-beta.12-b9745c6

[chriscurnow]

@CaerusKaru please note the API Documentation here lists fxLayoutWrap under the 'Containers' section with no indication that is now deprecated. I just spent several hours trying to find out why it didn't work 😄

[CaerusKaru]

@chriscurnow I apologize for the lapse in the documentation. It has indeed been updated and removed, but the Wiki gets updated from source with every _release_, instead of with every PR (to allow us to avoid cluttering the history and revert/patch if necessary).

The Wiki is planned for a refresh with the next release next Thursday if everything goes as scheduled. The source for the docs is in the docs directory in the repo.

Again, apologies for the confusion.

[naveedahmed1]

@CaerusKaru thank you for sharing this information. Can you please also confirm if we should expect this issue to be resolved in next release?

[CaerusKaru]

@naveedahmed1 It's definitely a priority, but the higher priority at the moment is getting a full SSR solution ready. The current goal is for the next release, but depending on other factors it may get bumped to the next release.

The current accepted workaround is to downgrade to the nightly build you indicated (or manually add the necessary CSS)

[CaerusKaru]

The fix for this, while really annoying to track down, is simple and stems from an issue with the underlying DOM representation Angular uses on the server (aka Domino). The internal method we were using to track styles accounted for this, but since it's internal we could no longer rely on it.

590 adds another method for overcoming this deficiency in a not-hacky way. Hopefully it will be merged this week, but the next release might be pushed back.

[naveedahmed1]

Thank you so much @CaerusKaru for the update and sharing the details :)

One more thing, though not directly related to this issue, but since I am uncertain if it worth opening a new issue for this or not so adding it here.

Since the flex-layout adds inline styles for formatting, there are many cases where we see repeated styles throughout the document. For the cases where the app isn't utilizing SSR, it shouldn't have any impact. But for apps that have SSR enabled, it could increase the overall size of the webpage and would require more bandwidth. What if the common styles could be combined as a class and then instead of having inline styles these classes could be used.

[CaerusKaru]

@naveedahmed1 That's the gist of #567, though combining classes is something I hadn't considered. The solution involves generating one class per element so that we can track the responsive part correctly, I'll have to think about possibly combining classes for common styles.

[naveedahmed1]

Awesome work @CaerusKaru !

It would be really great if the classes for the common styles could be combined. I just check a page on my site and it had 212 occurrences of inline style -webkit-flex:1 1 0.000000001px;box-sizing:border-box;flex:1 1 0.000000001px; which is roughly 16kb.

Looking forward :)

[angular-automatic-lock-bot[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._}