Using SSR with Flex Layout

@angular/flex-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). This entrypoint consolidates the logic for running Flex Layout on the server. Because it uses Node.js APIs, the FlexLayoutServerModule must be segmented into a server 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 '@angular/flex-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.