Can't correctly detect deviceType on server side

[Parsa-Sedigh]

I updated the package to v2.03 and I get no error in server side rendering, but when I used isPlatformBrowser() and isPlatformServer() for checking if we're currently in mobile or desktop, on the browser, the package can't correctly recognize I'm on mobile mode, but on the browser it does! Anyone can help me?

[AhsanAyaz]

@Parsa-Sedigh Are you using the instructions correctly from the README? I.e using a custom service like universal-device-detector.service.ts: with the following code:

import { Inject, Injectable, Optional, PLATFORM_ID } from '@angular/core';
import { REQUEST } from '@nguniversal/express-engine/tokens';
import { Request } from 'express';
import { DeviceDetectorService } from 'ngx-device-detector';
import {isPlatformServer} from '@angular/common';

@Injectable()
export class UniversalDeviceDetectorService extends DeviceDetectorService {
  constructor(@Inject(PLATFORM_ID) platformId: any, @Optional() @Inject(REQUEST) request: Request) {
    super(platformId);
    if (isPlatformServer(platformId)){
      super.setDeviceInfo((request.headers['user-agent'] as string) || '');
    }
  }
}

If not, please refer to the readme. If you're already doing it, could you share what's the output of the device info?

[Parsa-Sedigh]

@AhsanAyaz Thank you for respond. I already created that service and provided it in app.server.module as instruction says. Then I injected that service in app.component.ts and then created a method there which is:

  detectDevice(): void {
      this.transferState.set(STATE_KEY_ISMOBILEMODE,
        this.universalDeviceDetectorService.isMobile() || this.universalDeviceDetectorService.isTablet());
      this.dataServiceOBJ.changeMobileMode(this.transferState.get(STATE_KEY_ISMOBILEMODE, false));
  }

Then I checked my STATE_KEY_ISMOBILEMODE by using isPlatformBrowser() and isPlatformServer() . In the server I get: deviceInfo is: { userAgent: '', os: 'Unknown', browser: 'Unknown', device: 'Unknown', os_version: 'unknown', browser_version: '0', deviceType: 'desktop', orientation: 'Unknown' } and on the browser: browser: "Chrome" browser_version: "86.0.4240.198" device: "Nexus Phone" deviceType: "mobile" orientation: "portrait" os: "Android" os_version: "unknown" userAgent: "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Mobile Safari/537.36"

[AhsanAyaz]

Oh... That's painful @Parsa-Sedigh 💔 I'm gonna have a look later today at what's going on there. Do you have a sample project I could look at? 🙂

[AhsanAyaz]

@Parsa-Sedigh follow up question. What is your userAgent string? Can you log it on the server side?

[AhsanAyaz]

@Parsa-Sedigh I developed a demo for SSR with the library and deployed it. The implementation is in this PR And here's the demo link.

Open the demo link, right-click on the page and click View Page Source, you should see the correctly rendered page as the raw source. Notice that the demo app is using the library's 2.0.3 release.

Closing this ticket. Feel free to re-open if your issue persists even after following the example in the PR.