RouterState is serialized by reference

[bohoffi]

Which @ngrx/* package(s) are the source of the bug?

router-store, store

Minimal reproduction of the bug/regression with instructions

A minimal reproduction example can be found at https://stackblitz.com/edit/angular-uqnf9c?file=src/app/routed.component.ts

The situation scribbled in the example originates from an application which started to implement @ngrx/store in combination with @ngrx/router-store using NavigationActionTiming.PostActivation

The problem with the RouterState serialized by reference is that with late navigation action timing the route data gets serialized (by reference) too.

Mutating route data somewhere else like via a member (see StackBlitz example) leads to
TypeError: Cannot add property child, object is not extensible

Minimal reproduction of the bug/regression with instructions

RouterState serialization should use a clone when serializing to prevent unintended mutation of store contents.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s)

NgRx: >= 14.3.2
Angular: >= 14.2.9

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[timdeschryver]

This is the intended behavior, everything that is send or is retrieved from the store is frozen to prevent that the reference is modified.

What's the usecase to update the route data?

[bohoffi]

I agree that the state itself should be immutable as a reducers functions.

What's the usecase to update the route data?

There isn't a specific or even a defined one.

Taking a moment to think about the why would you do that? - there wasn't any reason against assigning route.data to a member variable without cloning it - a quick research didn't brought up any hints that this could be a bad idea.
For now I don't have any arguments against such an implementation that's why I've opened the issue.

Are there any reasons against creating a clone when serializing the RouterStateSnapshot?
If you have any please let me know.

As stated in the OP we stumbled upon this issue while migrating into the ngrx ecosystem. For now I was able to resolve it by cloning route.data when assigning it to the member.

[timdeschryver]

The problem isn't the serialization, but it's the immutable checks.
We freeze the reference because it shouldn't be possible to update anything that's going into, or coming out of the store state. If we would clone it, then it defeats the whole purpose of having immutable checks.