angular-permission: Error: state.$$permissionState is not a function

Hi, I face this issue when just inject to angular module. I’ve search but no found anywhere 😦. I include js like that:

  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="bower_components/angular-permission/dist/angular-permission.js"></script>
  <script src="bower_components/angular-permission/dist/angular-permission-ui.js"></script>

Full error log:

Error: state.$$permissionState is not a function
StatePermissionMap@http://localhost:8080/bower_components/angular-permission/dist/angular-permission-ui.js:455:27
run/<@http://localhost:8080/bower_components/angular-permission/dist/angular-permission-ui.js:70:36
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:8080/bower_components/angular/angular.js:18005:15
transitionTo@http://localhost:8080/bower_components/angular-ui-router/release/angular-ui-router.js:3273:13
registerState/<@http://localhost:8080/bower_components/angular-ui-router/release/angular-ui-router.js:2384:11
invoke@http://localhost:8080/bower_components/angular/angular.js:4718:16
handleIfMatch@http://localhost:8080/bower_components/angular-ui-router/release/angular-ui-router.js:1868:18
$UrlRouterProvider/this.when/strategies.matcher/<@http://localhost:8080/bower_components/angular-ui-router/release/angular-ui-router.js:1925:18
check@http://localhost:8080/bower_components/angular-ui-router/release/angular-ui-router.js:2041:23
update@http://localhost:8080/bower_components/angular-ui-router/release/angular-ui-router.js:2050:13
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:8080/bower_components/angular/angular.js:18005:15
afterLocationChange@http://localhost:8080/bower_components/angular/angular.js:13764:7
$locationWatch/<@http://localhost:8080/bower_components/angular/angular.js:13750:13
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:8080/bower_components/angular/angular.js:17682:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:8080/bower_components/angular/angular.js:17495:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:8080/bower_components/angular/angular.js:17790:13
bootstrapApply@http://localhost:8080/bower_components/angular/angular.js:1761:9
invoke@http://localhost:8080/bower_components/angular/angular.js:4718:16
bootstrap/doBootstrap@http://localhost:8080/bower_components/angular/angular.js:1759:5
bootstrap@http://localhost:8080/bower_components/angular/angular.js:1779:12
angularInit@http://localhost:8080/bower_components/angular/angular.js:1664:5
@http://localhost:8080/bower_components/angular/angular.js:31763:5
trigger@http://localhost:8080/bower_components/angular/angular.js:3207:7
defaultHandlerWrapper@http://localhost:8080/bower_components/angular/angular.js:3497:3
createEventHandler/eventHandler@http://localhost:8080/bower_components/angular/angular.js:3485:9
EventListener.handleEvent*addEventListenerFn@http://localhost:8080/bower_components/angular/angular.js:2796:7
jqLiteOn/addHandler@http://localhost:8080/bower_components/angular/angular.js:3547:11
jqLiteOn@http://localhost:8080/bower_components/angular/angular.js:3560:9
JQLite.prototype[name]@http://localhost:8080/bower_components/angular/angular.js:3728:17
JQLite.prototype.ready@http://localhost:8080/bower_components/angular/angular.js:3214:7
@http://localhost:8080/bower_components/angular/angular.js:31762:3
@http://localhost:8080/bower_components/angular/angular.js:6:2

I use angular 1.5.8.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 18

Most upvoted comments

I had the same problem and i found a solution. @spyhunter88 seeing your declaration order, you must declare permission and permission-ui after ui.route but not before your module (where you declare states)

Try this order

  'ui.router',
  'permission',
  'permission.ui',
  'myApp.auth',
  'myApp.serverRequest',
  'myApp.version',
  'satellizer'

Maybe the same applies to other facing the same issue 😃

PS: My scenario

    "angular-permission": "^5.1.0",
    "angular-ui-router": "^0.3.2",

victorjspinto on Jan 19, 2017

I have followed the above instruction and #365 issue, but state.$$permissionState is not a function still happen 😦

phuongduy2010 on May 5, 2017

Did you injected dependencies correctly?

https://github.com/Narzerus/angular-permission/wiki/Installation-guide-for-ui-router

masterspambot on Sep 1, 2016

@victorjspinto your solution perfectly solved my problem, Thanks. Injecting permission and permission.ui just after ui.router and before any custom module which defining states solved this issue.

vsagar9944 on Aug 31, 2017

I was able to solve the issue on my end by using the non-minified version of angular permission.

Jakobovski on May 15, 2017