PatrickJS / NG6-starter

:ng: An AngularJS Starter repo for AngularJS + ES6 + Webpack
https://angularclass.github.io/NG6-starter
Apache License 2.0
1.91k stars 1.35k forks source link

resolve in state definition causes "unknown provider error" in controller #245

Open elenat82 opened 6 years ago

elenat82 commented 6 years ago
I would like to check if the user is logged in before letting him enter the state, so I am trying to use the resolve on the state defintion but always get this error: `[$injector:unpr] Unknown provider: authorizedProvider <- authorized` ### Here is my example.component.js: `
import template from './example.html';
import controller from './example.controller';

/*
* example Component
*/
const exampleComponent = {
    restrict: 'E',
    bindings: { },
    template,
    controller
};

export default exampleComponent;
` ### Here is my example.controller.js: `
/*
* Example Controller file
* @class
*/
class ExampleController {
    /** @ngInject */
    constructor( currentUser, authorized, $state) {
        var self = this;
        self.userIsLogged = authorized;
      }
}
export default ExampleController;
` ### Here is my example.js: `
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import exampleComponent from './example.component';

const exampleModule = angular.module('example', [
    uiRouter
])

    .component('example', exampleComponent)

    .config(($stateProvider, $urlRouterProvider) => {
        'ngInject';

        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('example', {
                url: '/example',
                template: '',
                data: {
                    authorizedRoles: ['md', 'superuser']
                },
                resolve: {
                    authorized: function (currentUser) {
                        console.log(currentUser.logged);//this is a variable and it's true
                        return currentUser.logged;
                      }
                }
            });
    })

    .name;

export default exampleModule;
`
elenat82 commented 6 years ago
I found out myself thanks to [this ui-router issue](https://github.com/angular-ui/ui-router/issues/1737) I updated my code as follows: ### Here is my example.component.js: `
import template from './example.html';
import controller from './example.controller';

/*
* example Component
*/
const exampleComponent = {
    restrict: 'E',
    bindings: { },
    template,
    controller
};

export default exampleComponent;
` ### Here is my example.controller.js: `
/*
* Example Controller file
* @class
*/
class ExampleController {
    /** @ngInject */
    constructor( currentUser, $state) {
        var self = this;
      }
}
export default ExampleController;
` ### Here is my example.js: `
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import exampleComponent from './example.component';

const exampleModule = angular.module('example', [
    uiRouter
])

    .component('example', exampleComponent)

    .config(($stateProvider, $urlRouterProvider) => {
        'ngInject';

        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('example', {
                url: '/example',
                template: '',
                data: {
                    authorizedRoles: ['md', 'superuser']
                },
                resolve: {
                    authorized: function($q, $state,$timeout, $rootScope) {
                        if ($rootScope.userlogged == false) {
                            $timeout(function(){
                                $state.go('login');
                            });
                            return $q.reject('User is not logged in, redirect to login page');
                        }
                }
            });
    })

    .name;

export default exampleModule;
`