RafaelVidaurre/angular-permission

$q.any is not a function (Lazyloading angular modules using webpack)

Closed this issue · 2 comments

gustavomassa commented

Hello,

AngularJS: 1.6.9
uirouter/angularjs: 1.0.15
angular-permission: 6.0.0
webpack: 4.1.1

I'm using future states to lazy load angular modules dynamically:

const appState = {
    name: 'app.**',
    url: '/app',
    lazyLoad: ($transition$) => {
        const $ocLazyLoad = $transition$.injector().get("$ocLazyLoad");
        return import('../app/AppModule')
            .then(module => {
                $ocLazyLoad.load(module.APP_MODULE)
            })
            .catch(err => {
                throw new Error("Failed to load App Module: " + err);
            });
    }
};

This is how I register the states, I'm using the ui router api directly:

routeConfig.$inject = ['$urlRouterProvider', '$uiRouterProvider'];
function routeConfig($urlRouterProvider, $uiRouterProvider) {
    //get ui router url service
    //const $urlService = $uiRouterProvider.urlService;
    //$urlService.rules.otherwise({ state: 'access.signin' });
    $urlRouterProvider.otherwise(function ($injector) {
        const $state = $injector.get('$state');
        const SessionService = $injector.get('SessionService');
        if (SessionService.isUserLogged()) {
            $state.go("access.invalid");
        } else {
            $state.go("access.signin");
        }
    });
    //get ui router state registry
    const $stateRegistry = $uiRouterProvider.stateRegistry;
    $stateRegistry.register(accessState);
    $stateRegistry.register(invalidState);
    $stateRegistry.register(loginState);
    $stateRegistry.register(appFutureState);
}

For some reason, angular-permission is missing something betwheen the future states transitions.
On my app state when I try to access it I received a lot of "$q.any is not a function".
I'm setting the permissions here:

//set user scope
        $rootScope.user = user;
        //set user permissions
        const permissions = user.Role;
        for (let i = 0; i < permissions.length; i++) {
            console.log('permission: ', permissions[i].NAME);
            PermPermissionStore.definePermission(permissions[i].NAME, function () {
                return true;
            });
        }

image
image

angular-permissions.js
image

angular.js
image

Investigating a little bit more, the error is occuring here:
image
image

Maybe something related to:
angular/angular.js#11808
kriskowal/q#810

Please let me know if you need more info, I really don't know what do to anymore :(

Thanks

masterspambot commented
gustavomassa commented

@masterspambot

Yes, all the other $q functions works fine, the problem is the $q.any function.
When I change the code directly on the bundle.js generated by webpack, it works, I changed $q.any to $q.race.
Maybe when webpack is generating the bundle it is not detecting the $q.any for some reason..