title: Dynamic redirect angular routes to load dynamic modules
body: <p>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.</p>
  <p>The most near to reach my objetive is that code, but it have many errors.</p>
  <p>When the screen is <code>&lt;768</code> and I set <code>http://localhost:4200/</code> load web but mobile too. =(</p>
  <p>When the screen is <code>&gt;768</code> and I set <code>http://localhost:4200/</code> load web. =)</p>
  <p>When the screen is <code>&lt;768</code> and I set <code>http://localhost:4200/mobile/etc/etc/etc</code> load mob and web and redirect to <code>http://localhost:4200/mobile</code>. =(</p>
  <p>When the screen is <code>&gt;768</code> and I set <code>http://localhost:4200/web/etc/etc/etc</code> load web. =)</p>
  <p>app-routing.module.ts</p>
  <pre><code>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 &lt; 768 ? `/mobile/etc/etc/etc` : `/web/etc/etc/etc`,
      pathMatch: 'full'
    },
    {
      path: '**',
      redirectTo: window.innerWidth &lt; 768 ? `/mobile/etc/etc/etc` : `/web/etc/etc/etc`
    }
  ];
  </code></pre>
  <p>mob-guard.service.ts</p>
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class MobGuardService implements CanActivate {
  
    constructor(
      private router: Router
    ) {
    }
  
    canActivate() {
      if (window.innerWidth &gt;= 768) {
        this.router.navigate(['/']).then();
        return false;
      }
      return true;
    }
  
  }
  </code></pre>
  <p>web-guard.service.ts</p>
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class WebGuardService implements CanActivate {
  
    constructor(
      private router: Router
    ) {
    }
  
    canActivate() {
      if (window.innerWidth &lt; 768) {
        this.router.navigate(['/m/']).then();
        return false;
      }
      return true;
    }
  
  }
  </code></pre>
  <p>My objetive is simple but I dont know how do that:</p>
  <ol>
  <li>When the screen is '&lt;768' and put localhost:4200 rediretTo and load only module mobile</li>
  <li>When the screen is '&gt;768' and put localhost:4200 rediretTo and load only module web</li>
  <li>When the screen is '&lt;768' and put localhost:4200/mobile/etc/etc/etc rediretTo and load only module mobile</li>
  <li>When the screen is '&gt;768' and put localhost:4200/<strong>mobile</strong>/etc/etc/etc load only module web but redirect to localhost:4200/<strong>web</strong>/etc/etc/etc</li>
  <li>When the screen is '&lt;768' and put localhost:4200/<strong>web</strong>/etc/etc/etc load only module mob but redirect to localhost:4200/<strong>mobile</strong>/etc/etc/etc</li>
  </ol>
  <p>I try to to implement something like this, but dosent works:</p>
  <pre><code>{
      path: window.innerWidth &lt; 768 ? 'm' : 'w',
      loadChildren: window.innerWidth &lt; 768 ? './view/mob/mob.module#MobModule' : './view/web/web.module#WebModule',
      canActivate: window.innerWidth &lt; 768 ? [MobGuardService] : [WebGuardService],
      data: {
        preload: false
      }
    }
  </code></pre>
  <p>I hope help.
  Thanks for yor time.</p>