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

The FlexLayoutServerModule entrypoint consolidates the logic for running Flex Layout on the server. Because SSR 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 module file, 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 {}

Please note that by default, no other breakpoint activations will take place on the server (because there is no concept of browser window size). If a user wishes to have certain activations take place (for MediaObserver behavior, for instance), they can specify it in the main configuration as follows:

@NgModule({
  imports: [
	... other imports here
	FlexLayoutModule.withConfig({ssrObserveBreakpoints: ['xs', 'lt-md']})
  ]
})
export class AppModule {}