Angular | Responsive | Adaptive | ResetConfig

user_681929 0
Viewed 338

Short Question

What is the difference between/or better approach for switching the routes with routes.resetConfig(newRouteArray) vs reload the angular application on resize event and creating the routeArray according to the screen width?

An answer suggesting the solutions other than I suggested, or being used to solve such kind of problems in angular applications by the frontend gurus will be highly appreciated. As it seems, there is not enough information/documentation available around these problem statements or Responsive/Adaptive implementations

Note: Mobile and desktop application will have different routes/routes have different components as that of that in mobile/desktop

Question Explained

I was trying to create an angular application, which is meant to work on desktop browsers and mobile browsers as well. So making the components responsive is one aspect of the requirement. However, It may also happen that on mobile browsers, some module or process may have completely different look and feel, or flow etc. compared to as that of desktop. Hence I decided to go with the adaptive approach i.e

  • Maintain two modules in my angular project
  • One for mobile and one for desktop
  • Mobile module and its components will have their own responsive styling, and same goes for the desktop

I studiously followed this blog post, where it is explained that to have this kind of functionality, I have to maintain two different set of routes, one for the mobile and one for the desktop like below:

The resetConfig way:

    const desktop_routes: Routes = [
  {
    path: '', component: DesktopFrontpageComponent, children:
    [
      {path: 'product/:productName', component: ProductComponent}
    ]
  },
  {path: 'about', component: AboutComponent},
  // directs all other routes to the main page
  {path: '**', redirectTo: ''}
];

const mobile_routes: Routes = [
  {path: '', component: MobileFrontpageComponent},
  {path: 'product/:productName', component: ProductComponent},
  {path: 'about', component: AboutComponent},
  {path: 'user-profile', component: UserProfileComponent},
  // directs all other routes to the main page
  {path: '**', redirectTo: ''}
];

and then detect the screen size and reset routes like below:

@NgModule({
  imports: [RouterModule.forRoot(desktop_routes, {preloadingStrategy: PreloadAllModules})],
  exports: [RouterModule]
})
export class AppRoutingModule {

  public constructor(private router: Router,
    private applicationStateService: ApplicationStateService) {

    if (applicationStateService.getIsMobileResolution()) {
      router.resetConfig(mobile_routes);
    }
  }
}

However, some blog posts/github issues were referring that using resetConfig for child routes will create other issues also.

My Approach(without any resetConfig and loading appropriate routes on screenload)

What I tried in my app.routing.module.ts,as below

const routesToLoad = window.innerWidth >= 768 ? desktopRoutes : mobileRoutes;

and it seems to be working fine, more detailed code snippet is below

const desktop_routes: Routes = [
  {
    path: '', component: DesktopFrontpageComponent, children:
    [
      {path: 'product/:productName', component: ProductComponent}
    ]
  },
  {path: 'about', component: AboutComponent},
  // directs all other routes to the main page
  {path: '**', redirectTo: ''}
];

const mobile_routes: Routes = [
  {path: '', component: MobileFrontpageComponent},
  {path: 'product/:productName', component: ProductComponent},
  {path: 'about', component: AboutComponent},
  {path: 'user-profile', component: UserProfileComponent},
  // directs all other routes to the main page
  {path: '**', redirectTo: ''}
];

//see this line
const routesToLoad = window.innerWidth >= 768 ? desktopRoutes : mobileRoutes;

 @NgModule({
      imports: [RouterModule.forRoot(routesToLoad , {preloadingStrategy: PreloadAllModules})],
      exports: [RouterModule]
    })
    export class AppRoutingModule {
    
      
    }

along with that, in my app.component.ts

I have written

window.onresize = function(){ location.reload(); }

Sso what the code written above will do is, during the loading it will detect the screen size and will load appropriate routes, If screen size is changed(which the real user will rarely do), I am reloading the application to be on a safer side.

Now my question is about the correctness of the approaches,

  1. Resetting route config
  2. Creating the route array, conditionally, before passing it to forRoot
  3. Or there is any third way to do this in a more sensible/developer friendly way, so that maintaining this code at a later stage should not be a pain
angular responsive
1 Answers

A most simple way should be this

You can activate a RouteGuard if your component needs a mobile version

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./desktop/routes.module').then(mod => mod.RoutesModule),
    canActivate: [RouterGuard]
  },
  {
    path: 'mobile',
    loadChildren: () => import('./mobile/mobile-routes.module').then(mod => mod.MobileRoutesModule)
  }
];

Your RouterGuard canActivate function

export const isMobile = ()=>{
   // your mobile device detector
}

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!isMobile) {
      return this.router.parseUrl('/mobile');
    } else {
      return true;
    }
  }
}
user_61892620
Related