Query String $stateParams Empty with AngularJS 1.6+ #3752
Description
This issue tracker is for Bug Reports and Feature Requests only.
Please direct requests for help to StackOverflow.
See http://bit.ly/UIR-SOF for details.
This is a (check one box):
- Bug Report
- Feature Request
- General Query
My version of UI-Router is: 1.0.20
Bug Report
Current Behavior:
$stateParams does not contain properties for Query String Parameters for AngularJS version 1.6.x and above. It works correctly for AngularJS 1.5.11 and lower. The URL gets stuck on http://127.0.0.1:4200/#!#%2F%3Fid=1234
Expected Behavior:
$stateParams contains properties for Query String Parameters for AngularJS version 1.6.x and above. The ui-router routes successfully to to http://127.0.0.1:4200/#/foobar?id=1234
How-To Reproduce the Issue
We cannot use Plunker to test this so I have provided the instructions and the HTML code below with the bug.
(1) Save the HTML code below as index.html in a folder (e.g., ui-router-bug).
(2) Change directory to cd ui-router-bug.
(3) Execute npm install -g live-server.
(4) Serve the folder live-server --port 4200 ./.
(5) Navigate to http://127.0.0.1:4200/#/?id=1234
- If the code works, it should render the
FooBarControllerbecause the$urlRouterProvider.otherwise( ... )will redirect to theindexroute. - It the code does not work, it will be stuck on the
AppController.
IMPORTANT
Simply change to AngularJS 1.6.10 in the HTML by swapping the included Google CDN URLs, the ui-router is not redirecting to the FooBarController anymore.
<!DOCTYPE html>
<html data-ng-app="myApp" ng-strict-di ng-controller="AppController">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>UI-Router Bug Report</title>
</head>
<body>
<ui-view></ui-view>
<!-- DOES NOT WORK WITH NG 1.6.x -->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script> -->
<!-- WORKS WITH NG 1.5.x AND BELOW -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://unpkg.com/@uirouter/angularjs@1.0.20/release/angular-ui-router.min.js"></script>
<script type="text/javascript">
angular
.module("myApp", ["ui.router"])
.config([
"$stateProvider",
"$urlRouterProvider",
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state("index", {
url: "",
controller: "AppController",
template: "<h1>ERROR</h1><h2>Stuck on AppController</h2>"
})
.state("foobar", {
url: "/foobar?id&otherId",
controller: "FooBarController",
template:
"<h1>SUCCESS</h1><h2>UI-View renders FooBarController.</h2>"
});
$urlRouterProvider.otherwise(function($injector, $location) {
var $state = $injector.get("$state");
$state.go("foobar", $location.search());
return $location.path();
});
}
])
.controller("AppController", ["$state", "$stateParams", AppController])
.controller("FooBarController", ["$state", "$stateParams", FooBarController]);
function AppController($state, $stateParams) {
console.info("[INFO] AppController -- $stateParams", $stateParams);
}
function FooBarController($state, $stateParams) {
console.info("[INFO] FooBarController -- $stateParams", $stateParams);
}
</script>
</body>
</html>General Query
Please direct general implementation questions to StackOverflow:
http://stackoverflow.com/questions/ask?tags=angularjs,angular-ui-router
Please review the Sample Application which highlights common approaches:
https://github.com/ui-router/sample-app-angularjs
-
I have already asked my question on StackOverflow and nobody could answer the question
-
I have already reviewed the sample application for examples of common approaches
-
I believe my question can only be answered by the UI-Router maintainers
Related Issue
I have noticed another issue reported here.
#3744
The issue reporter, Andrew Nichols, is reporting a different issue.
However, I believe there is a strong correlation between these two issues.