Search code examples
angulargoogle-chromefirefox

Passing large Data in Navigationextras in router.navigate Angular 16 causing Error in Firefox


Hello Community I have a Question,

I have a problem with "router.navigate(['some-url'], extras).

In this extras object I have a state in which a list is passed that can be of different sizes.

if i pass a small list < 500 items, then it works smoothly in firefox and chrome.

Now I have a case with a list of 17k items and then it only works in chrome.

In firefox I get an error:

ERROR Error: Uncaught (in promise): [Exception... "Illegal value" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: https://some-url/main.e9ce4132b9234a49.js :: 103/l_/I :: line 3" data: no]

In firefox the router.navigate... crashes...

I dont know what i can try, but i expect that it works in both browsers


Solution

  • Firefox has a limit of 640k characters in the state object.

    Because Firefox saves state objects to the user's disk so they can be restored after the user restarts the browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage.