Using flex-layout with Angular Universal

[BirdInTheCity]

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]

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

[ThomasBurleson]

@alxhub - any thoughts how we should change our use of:

• Render - see https://github.com/angular/flex-layout/blob/master/src/lib/flexbox/api/base.ts#L130
• getDOM() - see https://github.com/angular/flex-layout/blob/master/src/lib/flexbox/api/base.ts#L95

[Josmorsot]

@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]

@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]

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

[ThomasBurleson]

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

[paullryan]

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.

[nicky-lenaers]

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

[alxhub]

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

[nicky-lenaers]

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

[ThomasBurleson]

@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.

[nicky-lenaers]

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

[DmitryEfimenko]

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.

[ThomasBurleson]

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

[glebmachine]

@ThomasBurleson Merged!
#342 (comment)

[ThomasBurleson]

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

[ThomasBurleson]

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

[glebmachine]

Awesome!

[fdambrosio]

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

[glebmachine]

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

Does anybody have monkey patch about that?

[glebmachine]

Done, i'm patch it with:

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

That is filthy, but it works)

[CaerusKaru]

@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]

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

[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.}