AngularJS - Module loading and dependency

Question

I have a little lack of understanding with the module loading lifecyle in my app.

A brief overview of the structure :

• app [module]
• common [module]
  • commonConfig [provider]
  • common [factory]
• SP.Helpers [module]
  • SPExternalRest [provider]
  • ... [providers]

Each module is in a separate file, call in the same order.

App module depends of common module. Common module depends of nothing. Helpers module depends of common.

Code where I initiate module :

angular.module('app', ['ngRoute', 'ngCookies', 'ngSanitize', 
                       'ngResource', 'ngAnimate', 'common', 'SP.Helpers']);
angular.module('common', []);
angular.module('SP.Helpers', ['common']);

Common.js

var commonModule = angular.module('common');
commonModule.provider('commonConfig', commonConfig);
commonModule.factory('common', [
  '$q',
  '$rootScope',
  '$timeout',
  'commonConfig',
  'logger',
  common]);

  function commonConfig() { ... }
  function common($q, $rootScope, $timeout, commonConfig, logger) { ... }

SPExternalRest.js

var module = angular.module("SP.Helpers");
module.provider(serviceId, ['common', 'commonConfig', SPExternalRest]);

function SPExternalRest(common, commonConfig) { ... }

My problem, is with this conofiguration, when it loads SP.Helpers, I have this error

Error: [$injector:modulerr] Failed to instantiate module SP.Helpers due to:

Error: [$injector:unpr] Unknown provider: common

When I debug step by step, I can see it call methods in this order :

• commonConfig
• ...
• SPExternalRest
• ...
• common

So, I understand why I have this error, but I don't understand why it doestn't finish to load the 'common' module before load 'SPExternalRest'... especially after having specified dependency between.

If you have any idea on it, I take.

Lauz

EDIT My app.html file.

<!-- Vendor libraries -->
<script src="Scripts/jquery-1.9.1.js"></script>

<script src="/_layouts/15/MicrosoftAjax.js"></script>
<script src="/_layouts/15/init.debug.js"></script>
<script src="/_layouts/15/core.debug.js"></script>
<script src="/_layouts/15/SP.Runtime.debug.js"></script>
<script src="/_layouts/15/SP.debug.js"></script>
<script src="/_layouts/15/SP.UI.Controls.debug.js"></script>
<script src="/_layouts/15/SP.RequestExecutor.js"></script>
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.1/angular-filter.js"></script>-->

<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/angular-sanitize.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/angular-cookies.js"></script>
<script src="Scripts/angular-animate.js"></script>
<script src="Scripts/URI.js"></script>
<script src="Scripts/linq.js"></script>

<!-- My libraries -->
<script src="App/utils/jquery.extensions.js"></script>

<!-- Modules initialization -->
<script src="App/common/initModule.js"></script>
<script src="App/utils/initModule.js"></script>
<script src="App/filters/initModule.js"></script>
<script src="App/repositories/initModule.js"></script>
<script src="App/services/initModule.js"></script>

<!-- common angular modules -->
<script src="App/common/common.js"></script>
<script src="App/common/logger.js"></script>

<!-- App bootstraping -->
<script src="App/app.js"></script>
<script src="App/config/config.js"></script>
<script src="App/config/config.route.js"></script>
<script src="App/config/config.angular.http.js"></script>
<script src="App/config/config.exceptionHandler.js"></script>

<!-- App filters -->
<script src="App/filters/currencyEuroFilter.js"></script>

<!-- App directives -->
<script src="App/directives/keyPressEnterDirective.js"></script>

<!-- App services -->
<script src="App/utils/spUtils.js"></script>
<script src="App/services/spCsomService.js"></script>
<script src="App/services/spExternalRestService.js"></script>
<!--<script src="App/services/spRestService.js"></script>-->
<script src="App/services/spContext.js"></script>

<!-- app core -->
<script src="App/layout/workingonit.js"></script>
<script src="App/layout/spAppChrome.js"></script>
<script src="App/layout/shell.js"></script>
<script src="App/layout/header.js"></script>
<script src="App/layout/quicklaunch.js"></script>

<!-- App entities -->
<script src="App/entities/productRange.js"></script>
<script src="App/entities/product.js"></script>
<script src="App/entities/manufacturer.js"></script>
<script src="App/entities/supplier.js"></script>
<script src="App/entities/searchResult.js"></script>

<!-- App reporitories -->
<script src="App/repositories/searchRepository.js"></script>
<script src="App/repositories/productRepository.js"></script>
<script src="App/repositories/productRangeRepository.js"></script>

<!-- App controllers -->
<script src="App/productranges/productRanges.js"></script>
<script src="App/productranges/productRangesDetail.js"></script>

<script src="App/products/products.js"></script>
<script src="App/products/productsDetail.js"></script>

<script src="App/search/search.js"></script>
<script src="App/search/searchDetail.js"></script>

<script src="App/help/help.js"></script>
<script src="App/settings/settings.js"></script>

SPExternalRestService.js

(function () {
    'use strict';

    var serviceId = 'SPExternalRest';
    var module = angular.module("SP.Helpers");
    module.provider(serviceId, [
        'common',
        'commonConfig',
        SPExternalRest
    ]);

    function SPExternalRest(
        common, commonConfig
        ) {
        var _finalUrl = '';
        var _baseUrl = '';

        init();

        function init() {
            common.$broadcast(config.workingOnItToggleEvent, { show: true });
            common.logger.log('service loaded', undefined, serviceId);
        };

        this.$get = ['$q', function ($q) {
            var that = this;

            // Methods accesible from instance
            return {
                setBaseUrl: function (newBaseUrl) {
                    _baseUrl = newBaseUrl;
                },
                get: function (operation, params, searches) {
                    var finalUrl = makeUrl(operation, params, searches);
                    var deferred = $q.defer();
                    var promise = deferred.promise;

                    var context = SP.ClientContext.get_current();
                    var request = new SP.WebRequestInfo();
                    request.set_url(finalUrl);
                    request.set_method('GET');
                    request.set_headers({ "Accept": "application/json;odata=verbose" });

                    var response = SP.WebProxy.invoke(context, request);
                    context.executeQueryAsync(function (data) {
                        if (response.get_statusCode() == 200) {
                            var body = response.get_body() || '{}';
                            try {
                                deferred.resolve(JSON.parse(body));
                            }
                            catch (error) {
                                deferred.reject(response);
                            }
                        }
                        else {
                            deferred.reject(response);
                        }
                    }, function (data) {
                        deferred.reject(JSON.parse(response.get_body()));
                    });

                    return promise;
                }
            };
        }];
    };

})();