Dynamically Change Between Routed Components with Angular Router

We are working on extending our Ionic Mobile App with improved Desktop layouts. It isn’t always possible to achieve the different layouts using css alone. Similarly combining both desktop & mobile templates in a single template quickly becomes unwieldy and difficult to read and understand.

We have created sub components that are rendered based on the platform detection. ie:

page1.page.html

<ng-container *ngIf="platform.is('mobile')">
    <page-1-mobile-view></page-1-mobile-view>>
</ng-container>
<ng-container *ngIf="platform.is('mobile')">
    <page-1-desktop-view></page-1-desktop-view>>
</ng-container>

The problem with this approach is the <ion-content></ion-content> tag in the platform specific components isn’t rendered. Ionic places a #ion-page class to the routed component and only immediate ion-content children are shown. Others are hidden.

Is it possible to use Angular Router to route to different components based on the platform?

ie:

const routes = [
    {
        path: "page-1",
        component: Page1MobilePage,
        canActivate: IsMobileRouterGuard
    },
    {
        path: "page-1",
        component: Page1DesktopPage,
        canActivate: IsDesktopRouterGuard
    }
]

Or does anyone else have an other suggestion?

Thanks a million!