Using SSR with Flex Layout - ngbracket/ngx-layout GitHub Wiki

@ngbracket/ngx-layout now supports server-side rendering (SSR).

Developers should see the Universal Demo app source for details:

• main.server.ts
• app.server.module.ts

The app.server.module uses the FlexLayoutServerModule (instead of the FlexLayoutModule).

The FlexLayoutServerModule entrypoint consolidates the logic for running Flex Layout on the server. Because SSR usings uses Node.js APIs, the FlexLayoutServerModule must be segmented into a server-only bundle.

This also helps avoid including server code in the browser bundle.

The FlexLayoutServerModule, can be imported into a server modulefile, e.g. app.server.module.ts as follows:

import {NgModule} from '@angular/core';
import {FlexLayoutServerModule} from '@ngbracket/ngx-layout/server';

@NgModule(({
  imports: [
    ... other imports here
    FlexLayoutServerModule,
  ]
}))
export class AppServerModule {}

This module - in addition to handling all of the style processing/rendering before the Angular app is bootstrapped on the server - also substitutes the version of MatchMedia with a server-compatible implementation called ServerMatchMedia.