1

How can I define a parent route from a child component after lazy loading?

For example:

app-routing.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'login', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];

user-routing.module.ts

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: '../register', component: RegisterComponent },
  { path: '../reset', component: ResetPasswordComponent },
  { path: '../verify', component: VerifyComponent, canActivate: [AuthGuard] }
];

Obviously the "../" does not work, but I want the paths "/register", "/reset", and "/verify"... to be root paths. However, I would like to still lazy load the user module so that everything loads at once, I just don't want my router to be in another folder or child route like "/user" or "/login".

Jonathan
  • 3,893
  • 5
  • 46
  • 77
  • '../register' this would never work for you instead try this 'register'. secondly, why do you need to define user routings on seperate file put it in the same file app routing module. – Muhammad Aftab Sep 16 '19 at 04:47
  • Any specific reason? why you want to load "/register", "/reset", and "/verify" together ? – Ravin Singh D Sep 16 '19 at 06:06
  • @MuhammadAftab obvioulsy it won't work as I said. So that I can load the module separately. I can define them in one file, but I can only load the module once, unless you know a way to define the routes beforehand without loading the module. – Jonathan Sep 17 '19 at 01:46
  • @Ravin they are just examples, but I don't want them looking like they are in a sub directory. – Jonathan Sep 17 '19 at 01:46

1 Answers1

0

Since the register, verify components were not in the app module, it is mandatory to place the module name in the url, so that the angular loads the component from that particular module.

In order to achieve your requirment, initially you can load the component from that module using the proper path and then you can change the url in the address bar, without navigation.

You could use location.go(url) which will basically change your url, without change in route of application.

Refer to this answer for more information.

this is yash
  • 533
  • 1
  • 3
  • 15
  • This would not be defining the route, but a different possibility as a hack. It would also not allow me to keep the routes already in the other templates. – Jonathan Sep 17 '19 at 01:48