Javascript 如何在Angular中分离桌面和移动页面并延迟加载每个页面

我的目标是将desktop页和mobile页分开.原因是desktop页的UX流是"滚动到部分".与此同时，mobile页的用户体验流程是"导航到下一部分".

问题是:

1. desktop个用户将加载mobile个页面.mobile个用户也是如此.

这是当前解决方案的可视化示意图:

1. 有main页和get-device-type服务.
2. the main page will render the desktop page or the mobile page.

我试过的是:

1. desktop页使用canLoad.

我的期望是:

1. 当desktop个用户访问路径checkout/1时，它将加载desktop个页面.
2. 当mobile个用户访问路径checkout/1时，它不会加载desktop页面，而是加载mobile页面.

我的实际结果是:

1. 当desktop个用户访问路径checkout/1时，它将加载desktop个页面.
2. 当mobile个用户访问路径checkout/1时，它不会加载任何页面.

Checkout-page-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IsDesktopGuard } from '../../../domain/usecases/is-desktop/is-desktop.guard';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import("../checkout-scroll-page/checkout-scroll-page.module").then(m => m.CheckoutScrollPageModule),
    canLoad: [IsDesktopGuard]
  },
  {
    path: '',
    loadChildren: () => import("../checkout-navigate-page/checkout-navigate-page.module").then(m => m.CheckoutNavigatePageModule)
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CheckoutPageRoutingModule { }