Angular - define parent route in child after lazy loading

Question

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".

Answer 1

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.