Mixing components and modules in angular routing

Question

I am working on a legacy angular app, and slowly have upgraded it to ng v9. Currently, i have such a routing config that loads only components but would like to transition to modules starting now.

This is how my current routing file looks like

const routes = [
  {path: 'home', component: HomeComponent, canActivate:[routeGuard]},
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'settings', loadChildren: () => import('path_to_import').then(mod => mod.SettingsModule)}
]

and from the component where am trying to navigate its simply like so -

<span routerLink="settings"></span>

Wierdly, when i click on settings on the page, it is redirecting me to '/settings/home' which is not the intended behavior.

But when i change the module to be loaded as component like this -

const routes = [
  {path: 'home', component: HomeComponent, canActivate:[routeGuard]},
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'settings', component: SettingsComponent}
]

it works perfect. so am not sure why loading module is making the difference here.

Any help appreciated!

Answer 1

You need to have the routing for your settings module also. Which would decide the further routing of the project.

and instead of loading modules like you mentioned, try to add the below lines to load the module settings .

const routes = [
{path: 'home', component: HomeComponent, canActivate:[routeGuard]},
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'settings', loadChildren: './settings/settings.module#SettingsModule'}
]

I don't know the path of your settings module. You please correct as per your path. and also define the routing file for the settings module also.