App routing doesn't navigate to the right component on window resize

I currently am working on setting up routing on a project I am working on. Right now, I have a few paths in the app.routing.module that have both a mobile and desktop component that are contingent on the screen size:

{
    path: ':termCode',
    component: isMobile ? DesktopComponent : MobileComponent,
    resolve: {user: UserResolver},
    runGuardsAndResolvers: 'always',
    children: [
      {
        path: 'search',
        component: isMobile ? ChildDesktopComponent : ChildMobileComponent,
        runGuardsAndResolvers: 'always'
      }

The isMobile value is a variable I have setup at the top of the file, that checks if the window width is greater than 677.

This setup works fine, however the component does not switch whenever the viewport size changes. In the app routing module, I have setup a subscription to a service that checks if the viewport has been resized:

this.viewportService.onResize().subscribe(() => {
      this.reloadPageOnResize();
    })

Which runs this reload method:

private reloadPageOnResize(){
    let url = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
      this.router.navigate([url], {queryParamsHandling: 'merge'});
    })
  }

I can confirm the method does run whenever I change the viewport, but the navigation does not update the component from desktop -> mobile or vice versa when I change the viewport size.

Any idea what I am missing?