Upon using angular-ui-router, I encountered the following error while clicking on the links view1 and view2 in index.html. The same example worked with the regular angular router. Is there something missing in the code? Thanks.
TypeError: promise.catch is not a function
at silenceUncaughtInPromise (angular-ui-router.js:1079)
at silentRejection (angular-ui-router.js:1082)
at angular-ui-router.js:1771
at handleError (angular-ui-router.js:1614)
at TransitionHook.invokeHook (angular-ui-router.js:1631)
at Function.TransitionHook.invokeHooks (angular-ui-router.js:1729)
at Transition.run (angular-ui-router.js:3475)
at StateService.transitionTo (angular-ui-router.js:7015)
at StateService.go (angular-ui-router.js:6911)
at angular-ui-router.js:8862
app.js -
angular.module('app1',[
'ui.router',
'app.controller']).
config(function($stateProvider,$urlRouterProvider,$locationProvider) {
$stateProvider.state('view1',{
url: '/view1',
controller: 'Controller1',
templateUrl: '/partials/view1.html'
}).state('view2',{
url: '/view2/:firstname/:lastname',
controller: 'Controller2',
templateUrl: '/partials/view2.html',
resolve: {
names: function(){
return ['JavaScript','JQuery','Angular','Bootstrap'];
}
}
});
$urlRouterProvider.otherwise('/index');
$locationProvider.html5Mode(true);
});
controller.js -
angular.module('app.controller',[]).
controller('Controller1',function($scope,$location,$state){
$scope.loadView2 = function(){
$state.go('view2', {
firstname: $scope.firstname,
lastname: $scope.lastname
});
//$location.path('/view2/'+$scope.firstname+'/'+$scope.lastname);
}
}).controller('Controller2',function($scope,$stateParams,names){
$scope.firstname = $stateParams.firstname;
$scope.lastname = $stateParams.lastname;
$scope.names = names;
});
index.html -
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script src="/angular/angular.js"></script>
<script src="/angular/angular-route-1.2.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css"/>
<title>
Angular App
</title>
</head>
<body ng-app="app1">
<div>
<ul class="menu">
<li><a ui-sref="view1">view1</a></li>
<li><a ui-sref="view2">view2</a></li>
</ul>
<ng-view></ng-view>
</div>
</body>
</html>