router.navigate() inside .subscribe halts functionality of the application

Question

I am trying to signin a user to my application and upon successful signin the user will get redirected to the home page ( / ).

Everything works fine here where the user gets redirected to the home page, but I am not able to navigate by clicking any links that are on the home page.

However, after examining the issue I noticed that, when I move the this.router.navigate(['/'], { relativeTo: this.route }) out of the subscribe block in the login method (given below) the page gets redirected to the home page and all functionality seems to be working fine.

There is some issue with the way I am calling the this.router.navigate from the subscribe block. Can someone help me out discovering what is going on? Thanks.

Note: I also found a similar question on SO . The suggested answer to assign router locally did not work. Angular version - 11

login(pwd: any){
    this.loginService.login(usrname,pwd).subscribe(
    (response) =>
     {
          console.log("success executed");

          this.router.navigate(['/'], { relativeTo: this.route }).then(x => console.log("????? "+x));
        return;
    },
    (error) => 
    {
         console.log("ERRR  == "+JSON.stringify(error));

    }
   );

}

UPDATE

APP ROUTING MODULE.

  { path: '', loadChildren: () => import('./home-page/home-page.module').then(m => m.HomePageModule) , pathMatch:"full"},

  {
    path: 'signup',
    loadChildren: () => import('./Reg/Reg.module').then(m => m.RegModule) 

  },

RegRoutingModule

import { SignUpComponent } from './sign-up/sign-up.component';

const routes: Routes = [
  { path: '', component: SignUpComponent },
  { path: 'signin', component: SignInComponent },

];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RegRoutingModule { }

When User decides to signin to the application, they go into the Signup page ( SignUpComponent ), and then click on the link SIGN IN ( SignInComponent ). This is a lazy loaded module.

The Homepage component is also a lazy loaded module.

UPDATE 2

HomePageRoutingModule

import { HomePageComponent } from './home-page.component';


const routes: Routes = [{ path: '', component: HomePageComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomePageRoutingModule { }

Answer 1

Most likely it's a problem of routes configuration, or even of some route guards that act in an unexpected way.

Are you using eager or lazy loading for your HomeComponent ? Showing the module where you configure your routes would be helpful, and I bet that the problem lies in there.

---

Also, I'm confused why you need to use { relativeTo: this.route } when you do the navigation. Ideally you wouldn't need any route scoping at this point.