soelinn commented 5 years ago

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):

[X] 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 FooBarController because the $urlRouterProvider.otherwise( ... ) will redirect to the index route.
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
[X] I have already reviewed the sample application for examples of common approaches
[X] I believe my question can only be answered by the UI-Router maintainers

Related Issue

I have noticed another issue reported here. https://github.com/angular-ui/ui-router/issues/3744

The issue reporter, Andrew Nichols, is reporting a different issue. However, I believe there is a strong correlation between these two issues.

austingriff commented 5 years ago

I have this same issue. It seems to be related to a route with an empty URL i.e. "/"

This is my exact problem on Stack Overflow. ADAL forces HTML5 and hash prefix. None of the suggested solutions works for me. This is still an issue

https://stackoverflow.com/questions/44845307/stateprovider-not-route-with-urlrouterprovider-otherwise

I am running AngularJS v1.5.6

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

This does not mean that the issue is invalid. Valid issues may be reopened.

Thank you for your contributions.

angular-ui / ui-router

Query String $stateParams Empty with AngularJS 1.6+ #3752