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.