Load route component based on device

I would like to be able to display different components based on the device the application is being viewed on. I am currently using the below to change the component and it works. The issue is that it is based on the screen width and not based on the device the user is viewing it on.

export const isDesktop = (): boolean => {
    return window.innerWidth > 768
}

export const routes: Routes = [
    {
        path: "",
        component: AppLayoutComponent,
        children: [
            { path: "route1", loadComponent: () => isDesktop() ? import("./pages/desktop/component1.component") : import("./pages/mobile/component1.component") },
            { path: "route2", loadComponent: () => isDesktop() ? import("./pages/desktop/component2.component") : import("./pages/mobile/component2.component") }
    ]
  }
];

I have found that other users use the ngx-device-detector package to determine the device type and I would like to be able to use this if possible but I cannot workout how I can use an instance of this service within the route array.

What I would like to be able to do is something like the below, but clearly this won't work.

import { DeviceDetectorService } from 'ngx-device-detector';

export const isDesktop = (): boolean => {
    const service = inject(DeviceDetectorService);
    return !service.isMobile();
}

Would you be able to advise if the way I am attempting this is totally wrong and give a suggested alternative approach, or would you know how I can get access to that service within the route array?

Solution

I found an answer to my problem, I am not sure if it is the best solution but it is the best I have found so far.

I have used two CanMatch guards, one for Mobile and one for Desktop.

mobile.guard.ts

@Injectable({
    providedIn: 'root'
  })
export class MobileGuard implements CanMatch {
    private deviceDetectorService = inject(DeviceDetectorService);
    canMatch(): MaybeAsync<GuardResult> {
        return this.deviceDetectorService.isMobile();
    }
}

desktop.guard.ts

@Injectable({
    providedIn: 'root'
  })
export class DesktopGuard implements CanMatch {
    private deviceDetectorService = inject(DeviceDetectorService);
    canMatch(): MaybeAsync<GuardResult> {
        return !this.deviceDetectorService.isMobile();
    }
}

In my routes I have done the following:

export const routes: Routes = [
    {
        path: "",
        component: AppLayoutComponent,
        children: [
            { path: "route1", loadComponent: () => import("./pages/mobile/component1.component"), canMatch: mapToCanMatch([MobileGuard]) },
            { path: "route1", loadComponent: () => import("./pages/desktop/component1.component"), canMatch: mapToCanMatch([DesktopGuard]) },

    ]
  }
];