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

Problem displaying images in Mean stack app using CSS background-image and Webpack

Refresh the information in the <ion-datetime> component by utilizing the formGroup

Observables waiting inside one another

Discovering various kinds of data with a single generic type

What strategies should be employed to develop an Angular 4 application seamlessly integrated with Asp.NET Core?

Filtering data in an antd table by searching

How can you utilize a JavaScript library that provides global variables in Typescript?

What is the process for incorporating the jsnetworkx library into an ionic or angular 4 project?

Ways to check my component using ActivatedRoute?

Sharing data between components in Angular 2 using the <router-outlet> technique

Loading dynamic content within Angular Material tabs allows for a more customized and interactive user experience

Update the response type for http.post function

There is no 'next' property available

Utilizing ngFor in Angular to dynamically refer to named variables within ngIf

Sending data to Dialog Component

Implementing Angular Universal on Azure Platform

Encountered an error while trying to install a package using NPM due to the requirement of 'require-from-string@

Struggling with Angular 5 Facebook authentication and attempting to successfully navigate to the main landing page

Is it possible to define TypeScript interfaces in a separate file and utilize them without the need for importing?

How come a Google Maps API component functions properly even without using *NgIf, but fails to work when excluded in Angular 9?