Angular 9 - router.navigate not firing

Question

When my App initializes, it calls a service that checks to ensure the user has properly configured their profile. If the profile is not configured, I redirect the user to the profile screen. This call is made from the service itself.

For some reason, my call to router.navigate is failing. What are some possible reasons to explain why router.navigate fails to do anything?

Here is how I make the call. Does the syntax look ok?

this.router.navigate(['profile', 'init']);

Here is my app.

app.routing

const routes: Routes = [
  { path: 'profile', loadChildren: () => import('./profile/profile.module').then((m) => m.ProfileModule) },
  {
    path: '',
    component: DefaultLayoutComponent,
    children: [
      { path: '', redirectTo: '/account', pathMatch: 'full' },
      { path: 'account', component: AccountComponent, canActivate: [ AuthGuardService ] },
    ]
  }
];

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

app.component

export class AppComponent implements OnInit{
  constructor(private profileInitService: ProfileInitService) {}

  ngOnInit(): void {
      this.profileInitService.checkProfile();
  }
}

profile.module

const routes: Routes = [
  {
    path: '',
    component: ProfileComponent,
    children: [
      {
        path: 'init',
        component: ProfileInitComponent,
        data: ProfileInitComponent.stepData
      },
    ]
  }
];

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

profile.service

export class ProfileService {
  constructor(
    private router: Router,
  ) {

  }

  checkProfile() {

    // FETCH ACCOUNT INFO

    // THEN

    // if account info incomplete {
      console.log('profile incomplete');
      this.router.navigate(['profile', 'init']);
    }
  }
}

My console.log is firing, but not the call to router.navigate. Could the way I have my routes set up be the reason why I cannot bounce the user to the profile/init page?

Answer 1

It looks like you are facing an issue with lazy-loading and relative routes.

Your ProfileComponent is configured on the route profile :

app.routing

 ...
  { path: 'profile', loadChildren: () => import('./profile/profile.module')...

profile.module

{
    path: '',
    component: ProfileComponent,
    children: [
    ...

As your ProfileComponent is lazzy loaded it does not use the root injector . This means the router service from your lazy-loaded module is in a different context from the one in the other modules...

When you execute this.router.navigate(['profile','init']) from ProfileComponent it tries to go to profile\profile\init .

if you enable tracing on the root route, you might get to see this happening:

RouterModule.forRoot(routes, {
  enableTracing: true, // <== this setting should not be enabled in prod
  ...
  })

To fix the navigation issue you should change it to relative navigation, using use the current route as base:

constructor(private route: ActivatedRoute, ...

this.router.navigate(['init'], { relativeTo: this.route })

or use a / to impose absolute navigation:

this.router.navigate(['/profile','init'])