angular/flex-layout

Using flex-layout with Angular Universal

Closed this issue · 30 comments

BirdInTheCity commented

From my limited knowledge of Node, I gather that anything referencing Document or Window will throw a server-side error.

That said, I'd like to incorporate flex-layout into my Angular Universal app. Is that possible? My initial attempt (simply following the readme) throws the following error:

ReferenceError: document is not defined

ThomasBurleson commented

Currently we do NOT support flex-layout with Angular Universal.

Josmorsot commented

@BirdInTheCity I had the same problem so I decided to use Layouts from MDL https://getmdl.io/.
Also I had this problem with Material2 buttons and other components but this can be solved using 'isNode' for check if request are being sent by node or browser

ThomasBurleson commented

@BirdInTheCity - can you provide a simple project (zip) that demonstrates this ? We will investigate.

Currently I am unclear how Angular Universal handles issues with code references to document ?

I think you are encountering code in match-media.ts::prepareQueryCSS(); and that function is patch code for some browser bugs.

nicky-lenaers commented

Is this going to make it into the rc.2 release?

ThomasBurleson commented

@nicky-lenaers - no. There are unknowns that still need to be resolved? (see above questions).

paullryan commented

When working with this you should focus on angular4 support instead of angular/universal given that 4 has universal built into @angular/platform-browser and @angular/platform-server.

@ThomasBurleson when working with document for universal you want to manipulate the renderer instead of document for rendering updates like your doing on https://github.com/angular/flex-layout/blob/master/src/lib/flexbox/api/base.ts#L138. If you have direct need for getDOM() you'll want to check for getDom() first and if it exists then isBrowser is true else your in node and probably won't be able to directly make that call.

Side note; a quick search through the current master is showing that you don't have any glaring issues with universal support so it should be pretty close to ready as is.

  • 👍3
nicky-lenaers commented

@paullryan nice, I really hope it'll be available soon!

  • 👍1
alxhub commented

Both getDOM() and the renderer will work fine on @angular/platform-server - it's direct DOM access that needs to be avoided.

  • 👍3
nicky-lenaers commented

I see errors on the matchMedia function server-side. Any thoughts on how to fix that?

ThomasBurleson commented

@nicky-lenaers - The current issue is that window.matchMedia() needs to actually run on the client-side; and the server side should be a mock that defalts to "all" matches:

On the client-side, rendering needs to force a re-register of the media queries to trigger the appropriate match announcements.

  • 👍1
nicky-lenaers commented

@ThomasBurleson great to here there is a solution. Is this already in development?

DmitryEfimenko commented

With the yesterday's 2.0.0-beta-4 release of angular/material2, one of the highlights of which was improved Angular Universal support via PR 4251, I'm surprised angular/flex-layout didn't have similar changes. I'd think they go hand in hand.

  • 👍11
nicky-lenaers commented

Just curious, is there any progress on implementing flex-layout for SSR? Like @DmitryEfimenko said, isn't similar implementation done for angular/material?

ThomasBurleson commented

@nicky-lenaers - we are waiting on the Angular Universal team for feedback regarding SSR. The Flex-Layout/SSR effort is planned to start mid-July. Meanwhile PR 4251 contains useful snippets that will be include in Beta.9

  • 👍7
  • 🎉3
nicky-lenaers commented

I see, thanks for the update @ThomasBurleson . Looking forward to it 😄

  • 👍5
mariohmol commented

Hi there!!! This is really needed =(
Anyone have tips about substitution for flex-layout that works with SSR?
Thanks

  • 👍2
chrisvfabio commented

@mariohmol I have been using https://github.com/devlint/gridlex in production

  • 👍2
glebmachine commented

Any updates?

  • 👍5
ThomasBurleson commented

Once PR #342 has been merged we will submit a revised PR for Angular Universal support.

  • 👍2
  • ❤️5
ThomasBurleson commented

@glebmachine - We appreciate your passion, thank you. We are working on this issue now! ;-)

  • 👍1
ThomasBurleson commented

FYI - The team is hoping to close this issue within the next 2-3 workdays.

  • 👍3
glebmachine commented
fdambrosio commented

I'm using beta.9 and I have the error
ReferenceError: document is not defined

  • 👍9
glebmachine commented

Guys, i'm struggling about:
ReferenceError: getComputedStyle is not defined
In lookupStyle function

Does anybody have monkey patch about that?

glebmachine commented

Done, i'm patch it with:

global['getComputedStyle'] = () => {
  return {
    getPropertyValue() { return '' },
  };
};

That is filthy, but it works)

CaerusKaru commented

@glebmachine Flex Layout fully supports Angular Universal as of v5.0.0-beta.13. Please ensure you have the correct version installed and follow the SSR guide here.

glebmachine commented

Thank you! I following this guide, but suddenly got error into ShowHideDirective : (
I hope it was due some external issues

angular-automatic-lock-bot commented

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.