AngularJS - States from submodule not recognized by main module

Question

I am currently geting an error trying to use states defined on my submodule. I am working on this AngularJS-Boilerplate and they code in a way that i am not very used to.

This is my main module:

;(function() {


  /**
   * Definition of the main app module and its dependencies
   */
  angular
    .module('boilerplate', [
      'ui.router',
      'boilerplate.demo'
    ])
    .config(config);


  config.$inject = ['$locationProvider', '$stateProvider', '$httpProvider', '$compileProvider', '$authProvider'];

  function config($locationProvider, $stateProvider, $httpProvider, $compileProvider, $authProvider) {

    $locationProvider.html5Mode(false);

    $httpProvider.interceptors.push('authInterceptor');

    $authProvider.facebook({
      clientId: '471453806577471',
      responseType: 'token'
    });

  }

  /**
   * Run block
   */
  angular
    .module('boilerplate')
    .run(run);

  run.$inject = ['$rootScope', '$state', '$stateParams','$location'];

  function run($rootScope, $state, $stateParams, $location) {
    $state.go('boilerplate.home');

  }


})();

This is my submodule:

;(function() {


  /**
   * Definition of the main app module and its dependencies
   */
  angular
    .module('boilerplate.demo', [
      'ui.router',
    ])
    .config(config);

  // safe dependency injection
  // this prevents minification issues
  config.$inject = ['$stateProvider'];

  function config($stateProvider) {
    console.log('states');
    $stateProvider
            .state('boilerplate.home', {
                url: '/home',
                templateUrl: 'app/demo/partials/home.html',
                controller: 'MainController',
                controllerAs: 'vm'
            })

  }

})();

I get this error:

angular.js:11706 Error: Could not resolve 'boilerplate.home' from state ''

If I put $stateProvider in the main module and change the controllers module also to the main module it works. Any help?

Emin Laletovic · Accepted Answer · 2017-02-23 08:59:53Z

2

You need a state provider in the main module as well, at least a default one. Try putting something like this in your main module:

$stateProvider
        .state('boilerplate', {
            url: '',
            abstract:true,
            templateUrl: 'app/demo/partials/blank.html' //some empty template, it will be overridden
        })

Please note that when creating states in separate modules, hierarchy in state naming must be satisfied. If your abstract or default state is named boilerplate, your submodule state must be named boilerplate.something.

Edit:

I forgot to add one thing. In your submodule's $stateProvider state definition, you need to add parent property. It should look something like this:

$stateProvider
            .state('boilerplate.home', {
                url: '/home',
                parent: 'boilerplate',
                templateUrl: 'app/demo/partials/home.html',
                controller: 'MainController',
                controllerAs: 'vm'
            })

Basically, child (submodule's) state should be aware on it's parent state.

edited Feb 23, 2017 at 8:59

answered Feb 22, 2017 at 22:39

Emin Laletovic

4,3541 gold badge17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rafael Reis Over a year ago

Thanks! Now it recognizes the state, but it does not load the partial :( And it is recognizing the partial, cause it raises an error if i put an invalid partial path.

Collectives™ on Stack Overflow

AngularJS - States from submodule not recognized by main module

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related