Angular 17 – routes extraOptions not working in a standalone + modules type mix application

by

Summary

The issue is with the Angular 17 application, which is a mix of standalone and module-based components. The problem lies in the MandateEditComponent, where the onRefresh method is not scrolling to the required div with the specified fragment id after navigating to a new route.

Root Cause

The root cause of the issue is that the extraOptions passed to the router.navigate method are not being applied correctly. Specifically, the fragment option is not working as expected. This is because the withInMemoryScrolling option is enabled, which can interfere with the fragment scrolling behavior.

Why This Happens in Real Systems

This issue can occur in real systems when:

  • Using a mix of standalone and module-based components in an Angular application
  • Enabling withInMemoryScrolling option in the router configuration
  • Navigating to a new route with a fragment option
  • The fragment option is not being applied correctly due to the withInMemoryScrolling option

Some possible causes include:

  • Incorrect router configuration
  • Conflicting options in the extraOptions object
  • Issues with the component’s lifecycle hooks

Real-World Impact

The impact of this issue is that the user will not be scrolled to the required section of the page after navigating to a new route. This can lead to a poor user experience, especially in long pages with multiple sections.

Some potential impacts include:

  • User frustration due to unexpected scrolling behavior
  • Difficulty in finding specific content on the page
  • Negative impact on user engagement and conversion rates

Example or Code

// MandateEditComponent.ts
onRefresh(){
  let fragmentOption = {fragment: 'mandatetasksdiv'};
  if(this.id) {
    this.router.navigate(['/refresh', `mandate--edit--${this.id}`], fragmentOption);
  } else {
    this.router.navigate(['/refresh', `mandate--add`]);
  }
}

How Senior Engineers Fix It

To fix this issue, senior engineers would:

  • Review the router configuration and ensure that the withInMemoryScrolling option is not interfering with the fragment scrolling behavior
  • Verify that the extraOptions object is being passed correctly to the router.navigate method
  • Use the scrollTo method or scrollIntoView method to manually scroll to the required element
  • Consider disabling the withInMemoryScrolling option or using a different scrolling strategy

Some possible solutions include:

  • Using the scrollTo method to manually scroll to the required element
  • Disabling the withInMemoryScrolling option and using a different scrolling strategy
  • Modifying the component’s lifecycle hooks to handle the scrolling behavior

Why Juniors Miss It

Junior engineers may miss this issue due to:

  • Lack of experience with Angular routing and scrolling behavior
  • Insufficient understanding of the withInMemoryScrolling option and its impact on fragment scrolling
  • Failure to review the router configuration and extraOptions object carefully
  • Not considering alternative scrolling strategies or manual scrolling methods

Some common mistakes include:

  • Not reviewing the router configuration carefully
  • Not understanding the impact of the withInMemoryScrolling option on fragment scrolling
  • Not considering alternative scrolling strategies or manual scrolling methods
  • Not testing the scrolling behavior thoroughly

Leave a Comment