Angular: Routing with authGuard issue

Question

I am trying to implement authGuard(s) for different routes and I stumbled upon an issue where I cannot figure out what is going on (ie why it works in one case and not the other). I am on angular version 15.2.9.

app-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import {authGuard} from "./auth/authGuard";
import {AboutComponent} from "./modules/about/components/about.component";
import {AppComponent} from "./app.component";
import {ResultsComponent} from "./modules/results/results/results.component";

const APP_ROUTES: Routes = [{
    path: '',
    component: AppComponent,
    canActivate: [authGuard],
    pathMatch: "full"
  },
  {
    path: 'results',
    component: ResultsComponent,
    canActivate: [authGuard],
    pathMatch: "full"
  },
  {
    path: 'about',
    component: AboutComponent,
    canActivate: [authGuard],
    pathMatch: "full",
  }
];

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

results-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { PATH_PARAM_SIMULATION_ID } from "src/app/models/path-param";
import { ResultsComponent } from "./results/results.component";

const RESULTS_ROUTES: Routes = [
  {
    path: `simulation/:${PATH_PARAM_SIMULATION_ID}/result`,
    component: ResultsComponent,
  },
];

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

about-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { AboutComponent } from "./components/about.component";
import {authGuard} from "../../auth/authGuard";

const ABOUT_MANAGEMENT_ROUTES: Routes = [
  {
    path: "about",
    component: AboutComponent,
    //canActivate: [authGuard],
  },
];

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

and finally authGuard.ts

import {CanActivateFn} from "@angular/router";
export const authGuard: CanActivateFn = (
  route,
  state) => {
    console.log('authGuard#canActivate called');
    return true;
};

When I direct my browser to 'results' route, I see the canActivate message on the console

authGuard#canActivate called

When direct it to the 'about' route, there is no message on the console. When I uncomment the 'canActivate: [authGuard]' line in about-routing.module.ts, it will also work for the 'about' route.

EDIT00: start For clarification I''ll add the component code.

about.component.ts

import {Component, OnDestroy, OnInit} from "@angular/core";

interface Info {
  title: string;
  text: any;
}

@Component({
  selector: "app-about",
  templateUrl: "./about.component.html",
  styleUrls: ["./about.component.scss"],
})
export class AboutComponent implements OnInit, OnDestroy {
  constructor() {}
  ngOnInit(): void {}
  ngOnDestroy() {}
}

results.component.ts

import { Component, OnDestroy, OnInit } from "@angular/core";

@Component({
  selector: "app-results",
  templateUrl: "./results.component.html",
  styleUrls: ["./results.component.scss"],
})
export class ResultsComponent implements OnInit, OnDestroy {
  constructor() {}
  ngOnInit(): void {}
  ngOnDestroy() {}
}

EDIT00: end

EDIT01: start Following @Chellappan வ advice about turning on some debugging, I hold both stacktraces right next to each other, but for the life of me, I see no difference except that for results the authGuard is called.

EDIT01: end

EDIT02: start Actually looking a little closer, there is a difference in "Router Event: ActivationStart". The routeConfig object is different. For 'results' it has "pathMatch: "full"" whereas it does not for "about". I am not sure if that is a significant difference, and I certainly do not know why this difference occurs at all, since both of the routes have been declared with "pathMatch = "full"" in app-routing.module.ts

EDIT02: end

EDIT03: start I tried another thing. I copy/pasted the 'about' module to 'about2'. For 'about2' the authGuard is called. I am stumped. I understand that the problem usually sits in front of the computer, but i would really like to understand what is going on here.

EDIT03: end

EDIT04: start More insight: In about-routing.module.ts: When comment out the line

imports: [RouterModule.forChild(ABOUT_MANAGEMENT_ROUTES)],

the authguard is called for 'about'. This leads me to the conclusion that there is some sort of interference between the 'about' route/path declared in about-routing.module.ts and app-routing.module.ts. To substantiate this, in results.module.ts, I replaced the line

path: `simulation/:${PATH_PARAM_SIMULATION_ID}/result`,

with

path: `results`,

And indeed, when I go to the 'results' path, the authGuard is not called anymore.

EDIT04: end

Question: Despite the fact that 'results' and 'about' have just about the same implementation (as far as I can tell), the behavior is different. Why? How do i go about debugging this? Any suggestions on where to look?

EDIT05: start

Based on all the above it my current understanding that the RouterModule.forChild call in about-routing.module.ts with path 'about' will override (where the 'about' acts as some sort of key into a map of some sort?) the already registered 'about' route declared in app-routing.module.ts

EDIT05: end