I am aiming to differentiate the desktop and mobile pages. The rationale is that the user experience flow for the desktop page involves "scrolling to section", while for the mobile page it entails "navigating to the next section."
The issue at hand:
- Desktop users are directed to the mobile page, and vice versa.
This illustrates the current solution visually:
- There exists a
mainpage along with aget-device-typeservice. - The
mainpage will display either thedesktopormobilepage. https://i.sstatic.net/KJSn1.png
Actions taken so far:
- Implemented
canLoadfor thedesktoppage.
Expected outcome:
- Upon visiting the path
checkout/1, desktop users should see thedesktoppage. - Conversely, mobile users accessing the same path should be directed to the
mobilepage.
Actual result observed:
- Desktop users landing on path
checkout/1are shown thedesktoppage. - However, when mobile users visit the same path, no page loads.
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 { }