2

I have an application with two lazy loading modules.

Main module:

const appRoutes = RouterModule.forRoot([
    {path: '', redirectTo: '/welcome', pathMatch: 'full'},
    {
      path: 'guest',
      loadChildren: 'app/guest-module/guest.module#GuestModule',
    },
    {
      path: '',
      loadChildren: 'app/user-module/user.module#UserModule',
    },
    {path: '**', component: NopageComponent},
  ],
);

Child module 1 (GuestModule):

  const viewRoutes = RouterModule.forChild([
     {path: 'overview/:reportId', component: HistoryOverviewComponent, canActivate: [GuestAuthGuard]},
  ]);

Child module 2 (UserModule):

  const viewRoutes = RouterModule.forChild([
     {path: 'overview/:reportId', component: HistoryOverviewComponent, canActivate: [UserAuthGuard]},
  ]);

When i route to /guest/overview/1 it always hit to the UserAuthGuard. Is it normal that children routes overlays each other?

Is there a way to distinguish them by configuration rather than changing names?

I use angular 5.2.9 with angular cli 1.7.3.

Rafał Kaczmarek
  • 31
  • 5

1 Answers1

0

i think your problem is in 

{
  path: '',
  loadChildren: 'app/user-module/user.module#UserModule',
},

you have to provide a name for that path or add pathMatch: 'full' to avoid redirection to user path, i suggest this:

 {
   path: 'guest',
   loadChildren: 'app/guest-module/guest.module#GuestModule',
 },
 {
   path: 'user',
   loadChildren: 'app/user-module/user.module#UserModule',
 },
 {path: '**', component: NopageComponent},

or:

 {
   path: 'guest',
   loadChildren: 'app/guest-module/guest.module#GuestModule',
 },
 {
   path: '',
   loadChildren: 'app/user-module/user.module#UserModule',
   pathMatch: 'full'
 },
 {path: '**', component: NopageComponent},
Fateh Mohamed
  • 20,445
  • 5
  • 43
  • 52
  • Nope i already tried it earlier and it is not working. Looks like something changes in the router path matcher - it is not aware of prefixes defined on the root. – Rafał Kaczmarek Apr 04 '18 at 11:48
  • Second answer is not working too, unfortunately. If I add pathMath: 'full' then angular cannot load any path that is defined in the module. However your answers lead me to a working solution. If i merge two module and use pathMatch: 'full', then routing is start to work as expecting. `const viewRoutes = RouterModule.forChild([ {path: 'overview/:reportId', component: HistoryOverviewComponent, canActivate: [GuestAuthGuard], pathMatch: 'full'}, {path: 'guest/overview/:reportId', component: HistoryOverviewComponent, canActivate: [GuestAuthGuard]}, ]);` – Rafał Kaczmarek Apr 04 '18 at 12:21
  • Merging two lazy loaded module could be use for now, but further down the road I would like to have two separate modules anyway. – Rafał Kaczmarek Apr 04 '18 at 12:32