Conditionally Load Different Modules on the Same Path in Angular

user_6269268 0
Viewed 1884

I have a multiple user Angular app, with a module for each user (because they have totally different accessible pages), like this:

  • app.module.ts
  • app-routing.module.ts
  • login/
    • login.component.ts
  • admin/
    • pages/
      • user-management/
      • configuration/
    • admin.module.ts
    • admin-routing.module.ts
  • user/
    • pages/
      • task-management/
      • configuration/
    • user.module.ts
    • user-routing.module.ts
  • guest/
    • pages/
    • guest.module.ts
    • guest-routing.module.ts

From the login page (/login from app-routing), I want to redirect to each module based on the credentials the user provided, but NOT with children routes like /user /admin or /guest

Instead, when an admin logs in, I want the URL to be reset. So, for example, the admin should not see the paths /admin/user-management or /admin/configuration; it just accesses /user-management or /configuration

Is this possible? Will it be a problem if I have a /configuration route for both admin and user?

EDIT: Here's a Stackblitz working example. Take a look at the URL routes when logged in.

EDIT 2: In the Stackblitz example, you can see the original problem on master and the working solution on solution branches.

angular2-routing angular
2 Answers

SOLUTION:

After a lot of investigation, I found out that it can be done with creating a route matcher.

CODE:

I managed to make it work with your code. Here is the working example: https://stackblitz.com/edit/angular2-routing-test-qj4geu?file=src/app/user/user.component.html

This is the relevant code on app-routing.module.ts:

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    matcher: url => {
      const user_type = localStorage.getItem('user_type');
      if (user_type === 'user') {
        return url.length ? { consumed: [] } : { consumed: url };
      }
      return null;
    },
    loadChildren: () => import('./user/user.module').then(m => m.UserModule)
  },
  {
    matcher: url => {
      const user_type = localStorage.getItem('user_type');
      if (user_type === 'admin') {
        return url.length ? { consumed: [] } : { consumed: url };
      }
      return null;
    },
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  },
  {
    matcher: url => {
      const user_type = localStorage.getItem('user_type');
      if (user_type === 'guest') {
        return url.length ? { consumed: [] } : { consumed: url };
      }
      return null;
    },
    loadChildren: () => import('./guest/guest.module').then(m => m.GuestModule)
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'login'
  }
];

NOTE:

As stated here: https://github.com/angular/angular/issues/23866#issuecomment-388527483, when we use route matcher we need to specify which portion of the url was consumed by the matcher function, and the remaining portion will be send to the nested router.

BLOGS:

Here are two blog posts that has in-depth details and walk-through how to do it:

Blog 1: https://medium.com/@brandontroberts/custom-route-matching-with-the-angular-router-fbdd48665483

Blog 2: https://medium.com/@lenseg1/loading-different-angular-modules-or-components-on-routes-with-same-path-2bb9ba4b6566

user_143898300

I gues your use lazy loading configuration looks something like this:

  {
    path: 'config',
    loadChildren: () => import('./pages/userConfig/userConfig.module').then( m => m.UserConfigPageModule),
  },

You can convert the arrow function into a normal function and do e.g. an switch statement to deside what module you want to load:

  {
    path: 'config',
    loadChildren: () => {
      switch(userType) {
        case 'IsAdmin':
          return import('./pages/adminConfig/adminConfig.module').then( m => m.AdminConfigPageModule);
        case 'IsUser':
          return import('./pages/userConfig/userConfig.module').then( m => m.UserConfigPageModule);
        default:
          return import('./pages/guestConfig/guestConfig.module').then( m => m.GuestConfigPageModule);
      }
    },
    canActivate: [ConfigGuard],
  },

Working stackblitz

Note:
After logout you need to refresh the stackblitz view otherwise it kinda glitches. I'll look into it later.

user_118230790
Related