Root component ActivatedRoute route tree disconnected from child routes?

We have a module-based A19 application which has a root component/module and a relatively deep tree of child routes/modules.

app-routing.module.ts:

const routes: Routes = [
{ path: "foo", loadChildren: () => import("foo.module").then(m) => m.FooModule },
{ path: "bar", loadChildren: () => import("bar.module").then(m) => m.BarModule },
];

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


foo-routing.module.ts:

const routes: Routes = [
{ path: "baz", loadChildren: () => import("baz.module").then(m) => m.BazModule },
{ path: "qux", loadChildren: () => import("qux.module").then(m) => m.QuxModule },
];

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


The root app component sets up a listener for navigation events and performs an action on NavigationEnd. This is default behavior for our app, but some child routes should not perform the action. For those cases, we add a custom flag to the "data" property of the specific child routes that indicates we should skip the action.

The root component navigation event listener looks at ActivatedRoute which would points to the root-level route by default and then crawls the "children" array looking for the "skipAction" property in data somewhere along the way to the bottom component/route. If found, don't do the action.

foo-routing.module.ts:

const routes: Routes = [
{ path: "baz", data: { skipAction: true }, loadChildren: () => import("baz.module").then(m) => m.BazModule },
{ path: "qux", loadChildren: () => import("qux.module").then(m) => m.QuxModule },
];


app.component.ts

@Component(...)
{
constructor(router: Router, route: ActivatedRoute)
{
router.events.subscribe(event =>
{
/// other events
if (event instanceof NavigationEnd && !this.skipAction(route))
{
this.doAction();
}
}
}

private skipAction(route: ActivatedRoute): boolean
{
return route.snapshot.data.skipAction || (route.children.length && this.skipAction(route.children[0]));
}


This worked in Angular 18 and prior, but after upgrading to A19, this has broken. It turns out the ActivatedRoute in the AppComponent no longer has any children, despite those children being loaded and rendered. Even wrapping the action code in a setTimeout with a wait obviously long enough to allow all children to load results in AppComponent's ActivatedRoute having no children.

However, if I inject ActivatedRoute at any point lower in the route tree, it has the full route hierarchy in parent / children properties, with the only exception being the parent chain ends before reaching AppComponent. It seems that the root route tree and the child route tree have become separated somehow.

I haven't found any information about this change when googling around, checking Angular docs for breaking changes, bug fixes, etc.

Anyone know anything that may lead to this, or some aspect of Angular 19 upgrade we may have missed?

Thanks!

Continue reading...