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 {}
Happy coding!!!