Angular 5: conditional module lazy loading

Question

I'm encountering an issue while trying to lazy load module according to the user profile, I defined three default paths (with empty path for each route) and each user has access to a specific module, i'm using a guards in order to detemine the current user profile (actually i'm toggling manually to set the default loaded module by setting const canGo =true)

The expected behavior is that the actual routing configuration should activate the adequate route according to the profile but that's not the case.

export const routes: Routes = [
  {
    path: '',
    loadChildren: 'app/user/user.module#UserModule',
    canActivate: [
      CanActivateUserModuleGuard
    ],
  },
  {
    path: '',
    loadChildren: 'app/admin/admin.module#AdminModule',
    canActivate: [
      CanActivateAdminModuleGuard
    ]
  },
  {
    path: '',
    loadChildren: 'app/moderator/moderator.module#ModeratorModule',
    canActivate: [
      CanActivateModeratorModuleGuard
    ]
  },
  {
    path: '404',
    component: NotFoundComponent
  }
];

NB: below the online issue if interested https://stackblitz.com/edit/angular-vd4oyu?file=app%2Fapp-routing.module.ts

What is the best way to accomplish this requirement?

There is no error, but the issue here the route detection lands by default to the first route path and doesn't continue to the next route though the guards. in the provided example it should redirect to the Admin module. — djerid
– djerid, Commented Mar 21, 2018 at 11:53

Vanderson Dill · Accepted Answer · 2022-02-17 19:51:09Z

You can achieve this too by using a routeFactory.

So you can load different modules on a single route, and don't need to create extra routes and guards.

The example below loads different modules for the route /parent based on permissions provided by an injectable service.

In app-routing.module.ts:

[
  { path: 'parent', loadChildren: () => 
    import('./parent/parent.module').then((m) => 
    m.ParentModule) },
  ...
]

In parent-routing.module.ts:

function routesFactory(permissionService: PermissioService) {
  return [
  {
    path: '',
    loadChildren: () => {
      if (permissionService.role1) {
        return import('../module1/module1.module').then((m) => m.Module1Module);
      } else if (permissionService.role2) {
        return import('../module2/module2.module').then((m) => m.Module2Module);
      } 
    }
  }];
}

@NgModule({
  imports: [RouterModule.forChild([])],
  exports: [RouterModule],
  providers: [
  {
    provide: ROUTES,
    useFactory: routesFactory,
    multi: true,
    deps: [PermissioService]
  }
  ]
})
export class ParentRoutingModule { }

Teddy Sterne · Accepted Answer · 2018-03-21 14:17:28Z

1

The router will only try the guard on the first route that it matches. Because of this limitation you will have to try one of two options.

The first is to implement a custom UrlMatcher that will effectively do the work of your guard and then only have it match on the module you want to load. This can be difficult if you need to make use of other services as the UrlMatcher is just a function so you won't get any DI.

The second option is to have a generic route with path '' that has another guard on it that performs the actions of the other three guards and then routes to the appropriate module. This sounds like a bit of a hack, however, the Angular documentation suggests doing just that in the ToH tutorial.

Demo

Guard

export class CanActivateModuleGuard implements CanActivate {

  constructor(private router: Router,
    private userGuard: CanActivateUserModuleGuard,
    private adminGuard: CanActivateAdminModuleGuard,
    private modGuard: CanActivateModeratorModuleGuard) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let canGo = [{
      guard: this.adminGuard,
      url: 'admin',
    }, {
      guard: this.userGuard,
      url: 'user',
    }, {
      guard: this.modGuard,
      url: 'moderator',
    }].some((config) => {
      if (config.guard.canActivate(route, state)) {
        if (state.url !== `/${config.url}`) {
          this.router.navigate([config.url]);
        }
        return true;
      }
    });

    if (!canGo) {
      this.router.navigate(['/404']);
    }

    return canGo;
  }
}

Routes

export const routes: Routes = [
  {
    path: '',
    canActivate: [CanActivateModuleGuard],
    children: [{
      path: 'user',
      loadChildren: 'app/user/user.module#UserModule',
      canActivate: [
        CanActivateUserModuleGuard
      ],
    },
    {
      path: 'admin',
      loadChildren: 'app/admin/admin.module#AdminModule',
      canActivate: [
        CanActivateAdminModuleGuard
      ]
    },
    {
      path: 'moderator',
      loadChildren: 'app/moderator/moderator.module#ModeratorModule',
      canActivate: [
        CanActivateModeratorModuleGuard
      ]
    }],
  },
  {
    path: '404',
    component: NotFoundComponent
  }
];

answered Mar 21, 2018 at 14:17

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

2 Comments

djerid Over a year ago

Thank you @Teddy Sterne, is it possible to define the routes with an empty url so i do not break my routing configuration within each modules local routing.

Teddy Sterne Over a year ago

The routes withing an module should be able to be relative to the root of the modules and so they will not need to know if they are in /admin, /user, or /moderator. Example <a [routerLink]="./sub/route">Link</a>

Collectives™ on Stack Overflow

Angular 5: conditional module lazy loading

2 Answers 2

Comments

Demo

Guard

Routes

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Guard

Routes

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related