CODEWITHSUNDEEP
angularangular-routing
codeandcloud
codeandcloud

Reputation: 55200

How to path prefix from lazy loaded module components route

I have a lazy loading feature module calendar.module loaded in the app-routing.module like

{
  path: "calendars",
  canActivate: [AuthGuard],
  loadChildren: () =>
    import("./calendars/calendar.module").then((m) => m.CalendarModule),
}

Now, I have a CraftMapComponent inside the calendar.module

enter image description here

I would like to access this component without the calendar pre-fix like this.

http://localhost:4200/teacher/craft-map

But all I can do in the calendar-routing.ts is to add route like

const routes: Routes = [
  { path: '', component: CalendarComponent, children: [
    { path: 'teacher/craft-map', component: CraftMapComponent }
  ]}
];

or

const routes: Routes = [
  { path: '', component: CalendarComponent },
  { path: 'teacher/craft-map', component: CraftMapComponent }
];

But both will resolve to

http://localhost:4200/calendar/teacher/craft-map

Is there a way by which I can omit the calendar prefix and still use the lazy load module?

Upvotes: 0

Views: 691

Answers (1)

Andrei Gătej
Andrei Gătej

Reputation: 11934

I don't think there is a way to do that, since the craftmap's route is a child of calendar route.

It's like traversing a tree, but you'd want to jump to a descendant directly, without traversing its ancestors first.

Also, note that you might not want to use CanActivate with lazy loaded modules, since with CanActivate, although it may return false, the module would be loaded either way, which might not be the expected behavior. I'd recommend using CanLoad, because if it fails(e.g returns false), you'll know for sure that the module won't be loaded.

Upvotes: 1

Related Questions