动态重定向角度路由以加载动态模块

Question

I have a big problem. I try many solutions without results :( I want to load a module depending from screen size to view mobile view or web view.

The most near to reach my objetive is that code, but it have many errors.

When the screen is <768 and I set http://localhost:4200/ load web but mobile too. =(

When the screen is >768 and I set http://localhost:4200/ load web. =)

When the screen is <768 and I set http://localhost:4200/mobile/etc/etc/etc load mob and web and redirect to http://localhost:4200/mobile . =(

When the screen is >768 and I set http://localhost:4200/web/etc/etc/etc load web. =)

app-routing.module.ts

const routes: Routes = [
  {
    path: 'mobile',
    loadChildren: './view/mobile/mobile.module#MobileModule',
    canActivate: [MobGuardService],
    data: {
      preload: false
    }
  },
  {
    path: 'web',
    loadChildren: './view/web/web.module#WebModule',
    canActivate: [WebGuardService],
    data: {
      preload: false
    }
  },
  {
    path: 'error',
    loadChildren: './view/error/error.module#ErrorModule',
    data: {
      preload: false
    }
  },
  {
    path: '',
    redirectTo: window.innerWidth < 768 ? `/mobile/etc/etc/etc` : `/web/etc/etc/etc`,
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: window.innerWidth < 768 ? `/mobile/etc/etc/etc` : `/web/etc/etc/etc`
  }
];

mob-guard.service.ts

@Injectable({
  providedIn: 'root'
})
export class MobGuardService implements CanActivate {

  constructor(
    private router: Router
  ) {
  }

  canActivate() {
    if (window.innerWidth >= 768) {
      this.router.navigate(['/']).then();
      return false;
    }
    return true;
  }

}

web-guard.service.ts

@Injectable({
  providedIn: 'root'
})
export class WebGuardService implements CanActivate {

  constructor(
    private router: Router
  ) {
  }

  canActivate() {
    if (window.innerWidth < 768) {
      this.router.navigate(['/m/']).then();
      return false;
    }
    return true;
  }

}

My objetive is simple but I dont know how do that:

1. When the screen is '<768' and put localhost:4200 rediretTo and load only module mobile
2. When the screen is '>768' and put localhost:4200 rediretTo and load only module web
3. When the screen is '<768' and put localhost:4200/mobile/etc/etc/etc rediretTo and load only module mobile
4. When the screen is '>768' and put localhost:4200/ mobile /etc/etc/etc load only module web but redirect to localhost:4200/ web /etc/etc/etc
5. When the screen is '<768' and put localhost:4200/ web /etc/etc/etc load only module mob but redirect to localhost:4200/ mobile /etc/etc/etc

I try to to implement something like this, but dosent works:

{
    path: window.innerWidth < 768 ? 'm' : 'w',
    loadChildren: window.innerWidth < 768 ? './view/mob/mob.module#MobModule' : './view/web/web.module#WebModule',
    canActivate: window.innerWidth < 768 ? [MobGuardService] : [WebGuardService],
    data: {
      preload: false
    }
  }

I hope help. Thanks for yor time.

Answer 1

You can make a one root component where you can add a check for checking window inner width and you can redirect accordingly your window view or mobile view.

        @component({
                    selector:'app-home',
                    template:'',
                  })
        constructor(private rout:router){
        if(window.innerWidth>768){
            this.rout.navigate(['/window'])
          }else{
            this.rout.navigate(['/mobile'])
          }
      }
    

Answer 2

I guess this could work for angular 9+

{
   path: '',
   loadChildren: () => window.innerWidth < 768 ? import(`/mobile/etc/etc/etc`).then(m => m.MobileModule) : import(`/web/etc/etc/etc`).then(m => m.WebModule),
   pathMatch: 'full'
}