Is there a way to decide angular route on server side rendering based on window width ? (or device type)

I’m trying to make my angular SSR application to decide between loading a landing page for mobile, when window width is below 768px, and a regular page route if width is above 768px.

Because on the server side ‘window’ object is not available, I can’t access width of screen. My typescript code to decide between routes:

    export class AppRoutingModule {
        public constructor(private router: Router,
        private applicationStateService: ApplicationStateService) {

        if (applicationStateService.getIsMobileResolution()) {
          router.resetConfig(mobile_routes);
        }else{
          router.resetConfig(desktop_routes);
        }
      }
    }
export class ApplicationStateService {

  private isMobileResolution: boolean = false;

  constructor(@Inject(PLATFORM_ID) private platformId) {
     if (isPlatformBrowser(this.platformId)) {
      this.isMobileResolution = window.innerWidth < 768;
     }
  }


  public getIsMobileResolution(): boolean {
    return this.isMobileResolution;
  }
}

On browser, on first page request on server, default route page is rendered and after client init it seems to change in mobile page.
On mobile browser seems to not work at all. Default page is rendered.

Is there a possible way to access window width in ApplicationStateService on a ‘else if (!platformBrowser)’ way ? That would fix my problem. Thank you !

Source: Angular Questions