My application utilizes UI-Router, specifically with a state named Widgets that includes a query parameter accepting an array of widgets:
const widgetsState = { name: "widgets", url: "/widgets?{widgets:string[]}", component: Widgets, params: {
widgets: {
isArray: true,
value: [],
}
} };
Routing to this state functions correctly with an empty array or an array containing multiple items, but encounters an issue with an array of just one item:
<a uiSref="widgets" [uiParams]="{ widgets: [] }">Empty array - works fine</a>
<a uiSref="widgets" [uiParams]="{ widgets: ['foo'] }">Single item - throws error!</a>
<a uiSref="widgets" [uiParams]="{ widgets: ['foo','bar'] }">Multiple items - works fine</a>
When attempting to route with a single item in the array, the following error is triggered:
This transition is invalid, detail: The following parameter values are not valid for state 'widgets': [widgets:"foo"]))
Is there a way to configure UI-Router to allow an array containing a single item to be passed in as a parameter?
You can view a minimal reproducible example of this error in this Stackblitz demo.
I have observed that removing the parameter from the URL enables proper handling of arrays with single items. However, it is essential for my application to maintain the ability to deep-link with these parameters, making this solution impractical.