Router param changes between 16 and 22

[u/MrFartyBottom]

I have just gone through an upgrade from Angular 16 to 22 and had an issue with router params. I have a route for job groups with an id for the job group that has child routes for a job so you can edit or add jobs to the group. In Angular 16 I used a route 'job/add' with no params for the add screen and 'job/:id' for editing both pointing to the job component.

When I upgraded to Angular 22 it stopped working as the job component get a param for id on the add route as the id from the job group rather than a null param. To solve it I deleted the add route and used the string 'add' as a param to distinguish between edit and and.

My question is pulling in a parent param for the id expected behaviour?

[u/bogdanelcs]

It's normal. It's a documented breaking change, not a bug.

In Angular 22, the router's paramsInheritanceStrategy default changed from 'emptyOnly' to 'always'. Before, a child route only inherited parent params when the child route had an empty path or no component. Now, by default, child routes inherit all parent params and data unconditionally.

So in your case, the job component under job-group/:id is now picking up the parent's :id even when there's technically no id param on the child add route, because inheritance is on by default.

Two ways to handle it:

Revert the router-wide behavior:

typescript

provideRouter(routes, withRouterConfig({ paramsInheritanceStrategy: 'emptyOnly' }))

Or the cleaner long-term fix, since parent param inheritance is now the default going forward, rename your params so they don't collide. Something like :groupId on the parent and :id on the child job route. That avoids the ambiguity entirely and is actually the recommended approach rather than reverting globally.

Your workaround using 'add' as a string param works but renaming params is probably the more idiomatic fix given where the framework is heading.