After upgrading to Angular 15, the Router getCurrentNavigation function consistently returns null

Question

After upgrading to Angular 15, the Router getCurrentNavigation function consistently returns null

Since upgrading to angular 15, I've encountered a problem where the this.router.getCurrentNavigation() method is returning null when trying to access a state property passed to the router. This state property was initially set using router.navigate in another component.

In Component A:

https://i.stack.imgur.com/zs5DS.png

In Component B:

https://i.stack.imgur.com/tR941.png

I am able to access the state in Component B by using this.state = history.state;. However, the code

this.state = this.router.getCurrentNavigation()?.extras?.state ?? {};

does not work as getCurrentNavigation() returns null. Can anyone explain why?

angular typescript angular-ui-router router

Answer 1

Answer №1

We encountered a similar issue after upgrading to Angular 15, but we managed to solve it by implementing a new resolver. This resolver has the ability to access the current route using getCurrentNavigation(), allowing it to send back any "extra" data needed by the component.

@Injectable()
export class MyComponentResolver implements Resolve<MyComponentExtraData> {
  constructor(private router: Router) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): MyComponentExtraData{
  
    return this.router.getCurrentNavigation().extras?.state['MyData'];
  }
}

By utilizing the data returned from the resolver in the component constructor without glitches, you can easily access it through the activatedRoute.snapshot dictionary.

constructor(private activatedRoute: ActivatedRoute) {
 
    let myData = this.activatedRoute.snapshot.data['myData'] /* the myData key depends on how you defined the resolver in your route declaration*/
  }

Answer 2

We encountered a similar issue after upgrading to Angular 15, but we managed to solve it by implementing a new resolver. This resolver has the ability to access the current route using getCurrentNavigation(), allowing it to send back any "extra" data needed by the component.

@Injectable()
export class MyComponentResolver implements Resolve<MyComponentExtraData> {
  constructor(private router: Router) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): MyComponentExtraData{
  
    return this.router.getCurrentNavigation().extras?.state['MyData'];
  }
}

By utilizing the data returned from the resolver in the component constructor without glitches, you can easily access it through the activatedRoute.snapshot dictionary.

constructor(private activatedRoute: ActivatedRoute) {
 
    let myData = this.activatedRoute.snapshot.data['myData'] /* the myData key depends on how you defined the resolver in your route declaration*/
  }

Answer 3

Answer №2

Starting from Angular version 15, it is possible for

this.router.getCurrentNavigation()

to return null if the component is instantiated after the navigation process.

An alternative approach is to retrieve state information directly from the Location module provided by @angular/common.

import { Location } from '@angular/common';

constructor(private location: Location) {
  location.getState() // utilize the state as needed
}

Answer 4

Starting from Angular version 15, it is possible for

this.router.getCurrentNavigation()

to return null if the component is instantiated after the navigation process.

An alternative approach is to retrieve state information directly from the Location module provided by @angular/common.

import { Location } from '@angular/common';

constructor(private location: Location) {
  location.getState() // utilize the state as needed
}

After upgrading to Angular 15, the Router getCurrentNavigation function consistently returns null

Answer №1

Answer №2

Similar questions

Is it possible to import in TypeScript using only the declaration statement?

Do Angular pipe promises have the potential to disrupt an application's functionality?

Paginator for Angular Material Cards

Are there any @types available for browser extension objects that are interoperable?

How can union types be used correctly in a generic functional component when type 'U' is not assignable to type 'T'?

I'm trying to troubleshoot this issue - the duration is showing up as NaN years, NaN months, NaN weeks, NaN days, NaN

Angular - Update a single property of the environment

Utilizing an Express server instead of Lite server in combination with Angular 2 RC

Attempting to design an interface in Angular 2 to align with the anticipated API response structure

`What is the best way to transfer an observable to a child component?`

Disable and grey out the button while waiting for the Observable to broadcast successfully

Building the Android release version of an Ionic Cordova app using the command `ionic cordova build android –prod –release` may encounter a failure when it

Sorting array of arrays in TypeScript and Node.js involves defining the arrays and then applying a sorting algorithm

Establish an enumeration using universally recognized identifiers

What could be causing the angular Data table to not display properly?

Exploring the implementation of if/else statements in Sass/HTML

Clarification Needed on Keyup Event in Angular 2

Tips for resetting the mat-progress-spinner to its initial state

Refreshing manually will display only the JSON data

Managing multiple asynchronous requests through Observables in web development