Angular UI Router issue when redirecting to a template after resolve() throws error (Ionic beta 14 issue)

ionic-v1
1

Hello all !

So I had a bug using the last beta of Ionic with Firebase authentication process that I didn’t have with the beta 13. After many hours of work, I successfully took both Ionic AND Firebase out of the picture, revelating a bug with Angular 1.3.6 (included in beta 14) and UI-router. I got a mcve on this. Here is the case : I’m trying to redirect a user to a login page when he’s not authenticated (this is very basic). Here is the code :

index.html :

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="starter">

<div ui-view></div>

<script id="login.html" type="text/ng-template">
    l
</script>

<script id="welcome.html" type="text/ng-template">
    w
</script>
</body>
</html>

app.js :

angular.module('starter', ['ui.router'])

.run(["$rootScope", "$state", function($rootScope, $state) {
    $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
        if (error === "nope") {
            $state.go("login");
        }
    });
}])

.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/welcome');

    $stateProvider
        .state('welcome', {
            url: '/welcome',
            templateUrl: 'welcome.html',
            resolve: {
                "auth": ["$q", function($q) {
                    return $q.reject("nope");
                }]
            }
        })

        .state('login', {
            url: '/login',
            templateUrl: 'views/login.html'
        })
});

and just for fun, views/login.html

vl

So, when the above code is ran, the output is good (it shows “vl”), but look at the Chrome console :

image
image.png766×263 37.8 KB

Now, the crazy part of it, is if you modify the JS and replace

templateUrl: 'views/login.html'

in the login state by simply

templateUrl: 'login.html'

using the ng-template defined in the html, ALL IS GOOD ! So well, I guess using a file as template must trigger some watcher or whatever… Well no, I’m just out of ideas.

here are two things that could help :

  • There is no error when using ngRoute in place of UI Router
  • There is no error if replacing Angular version with the 1.2.25

So I think it’s a bug with UI Router and Angular 1.3. But don’t know at all what to do to solve it.

Thanks ahead for your help !

2

Here is the solution if anyone needs it (someone answered to me on Stackoverflow) :

You need to call event.preventDefault() before you call $state.go().
See here: Plunker - Untitled

1 Like