Angular Routing Error - TypeError: Cannot assign to read only property '_futureSnapshot'

Viewed 351

I have an Angular project with NgRx set up. I want to dispatch actions for navigation so that I don't have to inject the router and ActivatedRoute into the component, and have been following Todd Mottos excellent videos for this.

An ngrx effect is set up to listen for navigation actions. This is set up at the root app level.

// NgRx Effect
navigate$ = createEffect(() => {
   ... effect code
   // important bit
   this.router.navigate(path, { queryParams, ...extras });
}, { dispatch: false });

However, I have run into an issue today, where I get an error when trying to dispatch a navigation action with a relative path from a component in a feature (not root level). I am passing in the ActivatedRoute from the feature component, as per usual, so that the actual path can be calculated from the relative path:

this.store.dispatch(new fromRootStore.Go({
  path: ['..', 0],
  extras: { relativeTo: this.route }
});

However, I get the following error:

Cannot assign to read only property '_futureSnapshot' of object '[object Object]'

Using the router directly in the feature component, and passing the component's ActivatedRoute works fine:

this.router.navigate(['..', 0], { relativeTo: this.route });

Dispatching a routing action with an absolute path also works fine:

this.store.dispatch(new fromRootStore.Go({ path: '/absolute/path' });

Is the something to do with the fact that the router is in the root level of the application, but the ActivatedSnapshot is from a component in a feature? Grateful for any help on this.

0 Answers
Related