Angular中分离桌面/移动端页面并实现懒加载的路由问题排查

目标 #

分离桌面端和移动端页面，因为桌面端用户的体验流程为「滚动到对应区块」，而移动端用户的体验流程为「导航到下一个区块」。

当前问题 #

• 桌面端用户会加载移动端页面，移动端用户也会加载桌面端页面

现有解决方案架构 #

• 存在main页面和get-device-type服务
• main页面负责根据设备类型渲染桌面端或移动端页面

已尝试方案 #

• 为桌面端页面配置canLoad守卫

预期结果 #

• 桌面端用户访问路径checkout/1时，加载桌面端页面
• 移动端用户访问路径checkout/1时，不加载桌面端页面，直接加载移动端页面

实际结果 #

• 桌面端用户访问checkout/1时，成功加载桌面端页面
• 移动端用户访问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 { }

问题排查与解决思路 #

1. 检查IsDesktopGuard的逻辑正确性 #

移动端用户无法加载页面的核心原因大概率是IsDesktopGuard的设备识别逻辑出错，导致移动端访问时守卫返回true（错误加载桌面端页面），或者返回false后路由未正确匹配到移动端模块。

需确保守卫能精准识别设备类型：

@Injectable({ providedIn: 'root' })
export class IsDesktopGuard implements CanLoad {
  constructor(private deviceService: DeviceTypeService) {}

  canLoad(): boolean {
    // 确认get-device-type服务的isDesktop方法返回值正确：桌面端返回true，移动端返回false
    return this.deviceService.isDesktop();
  }
}

2. 优化路由配置（可选，提升严谨性） #

为避免桌面端用户匹配到移动端路由，可给移动端路由添加反向守卫IsMobileGuard，确保只有移动端用户能加载该模块：

// 先实现IsMobileGuard
@Injectable({ providedIn: 'root' })
export class IsMobileGuard implements CanLoad {
  constructor(private deviceService: DeviceTypeService) {}

  canLoad(): boolean {
    return !this.deviceService.isDesktop();
  }
}

// 修改路由配置
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),
    canLoad: [IsMobileGuard]
  }
];

3. 验证移动端模块的路由配置 #

确认checkout-navigate-page.module内部的路由配置正确，已导出对应页面组件，无额外路由拦截导致无法加载。

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan