angular-18 router-state navigation, state is undefined

I have an application that have in one of its components, a button that route to another component with a state to be consumed in the target component , the code for this is :

<button *ngIf="features.includes(featureType.Bulk)"
[routerLink]="'/' + IN_APP_ROUTES.prefix+ '/' + Id+ '/' +IN_APP_ROUTES.new"
[state]="state"
class="btn btn-link text-nowrap"

type="button">Upload new
</button>


then in the target component I got the state from :

history.state


it was working fine with angular 14 and 16 , then a couple of days ago the team has upgraded the application to angular 18 and then the state in the target component stopped working , when i conosle.log it , it has navigationId 1 but do not have the object I set in the router-Link, while I was debugging I tried to subscribe to the router events in the taget component , and was able to find the state in the NavigationStart event ,

this.router.events.pipe(
filter(e => e instanceof NavigationStart),
map(() => {
const currentState = this.router.getCurrentNavigation();
return currentState?.extras.state;
})
).subscribe((res)=>{
this.state = res as myObject|| this.state;
console.log('at-subscribe', this.state);


});


but after this event the state is undefined again , can anyone please let me know how it should work now ?

Continue reading...