Integrar Flex Layout con Angular Universal

Uno de los problemas que se puede enfrentar cuando se integra un proyecto de Angular con Angular Universal, es que si utilizamos Flex Layout podemos enfrentar problemas con los estilos y maquetación.

Ante estos problemas en mi caso particular pude encontrar un posible motivo por el cual Flex Layout no estaba funcionando correctamente a la hora de generar la página inicial proporcionada al usuario en el primer request hecho al sitio.

Todo se debe a que una vez que se utiliza Angular Universal, es necesario modificar los siguientes archivos.

En el archivo app.server.module.ts se debe agregar el módulo FlexLayoutServerModule que permitirá a Angular Universal crear los estilos necesarios en la página inicial que el navegador descarga.

// app.server.module.ts
import {NgModule} from '@angular/core';
import {FlexLayoutServerModule} from '@angular/flex-layout/server';

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

Y luego en el archivo app.module.ts agregar como configuración al módulo FlexLayoutModule el breakpoint para pantallas pequeñas y medianas. Hay que tener en cuenta, que en el momento de la petición, el servidor de Angular Universal no conoce las proporciones o dispositivo desde el que se hace la petición, por este motivo hay que definir cuál será la resolución por defecto a utilizarse desde el lado del servidor.

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