How to separate desktop and mobile page and lazy load each page in Angular?

Question

my goal is to separate desktop and mobile page. The reason is that the desktop page UX flow is "scroll to section". Meanwhile, the mobile page UX flow is "navigate to the next section".

The problem:

The desktop user will load mobile page. Same goes for the mobile user.

This is the visual diagram of the current solution:

there is a main page and get-device-type service.
the main page will render the desktop page or the mobile page.

What I've tried:

use canLoad for desktop page.

My expectation:

When the desktop user visit path checkout/1, it will load the desktop page.
When the mobile user visit path checkout/1, it will not load the desktop page but instead load the mobile page.

My actual result:

When the desktop user visit path checkout/1, it will load the desktop page.
When the mobile user visit path checkout/1, it will not load any page.

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 { }

Naren Murali · Accepted Answer · 2023-12-25 19:01:29Z

1

You can conditionally do loadChildren based on the device?

const isMobile = {
  Android: function () {
    return navigator.userAgent.match(/Android/i);
  },
  BlackBerry: function () {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  iOS: function () {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Opera: function () {
    return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function () {
    return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i);
  },
  any: function () {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};

const routes: Routes = [
  {
    path: 'desktop',
    loadChildren: () => {
      if (!isMobile.any()) {
        return import("../checkout-scroll-page/checkout-scroll-page.module").then(m => m.CheckoutScrollPageModule);
      } else {
        return import("../checkout-navigate-page/checkout-navigate-page.module").then(m => m.CheckoutNavigatePageModule);
      } 
     },
  },
];

edited Dec 25, 2023 at 19:01

answered Dec 23, 2023 at 5:36

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jason Rich Darmawan Over a year ago

this does not work in our case because sometimes iPhone user will want to open the url in desktop, and it usually do it by "share the link" and open it in a "MacBook".

Naren Murali Over a year ago

@JasonRichDarmawan insert the guard on mobile also to do the redirect

Jason Rich Darmawan Over a year ago

No, I believe mobile and desktop path is bad for the user experience. Since it uses redirect. For example, when user press the back button. The current solution is to use canMatch guard (available since Angular 14)

Jason Rich Darmawan Over a year ago

Note: "Using navigator is not Angular Universal friendly". Thank you for the answer. I will accept this answer. Anyway, I found another solution but only exist in Angular 14. You can use canMatch guard and create 2 route with identical path value.

Collectives™ on Stack Overflow

How to separate desktop and mobile page and lazy load each page in Angular?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related