angularjsangularjs-module

Angular doesn't load a module - $injector:modulerr

I get the following error in my application:

error

The problem only appears when loading a specific module, here's my main module:

app.module.js

(function () {

    'use strict';

    angular
        .module( 'app', [
            /*
             * Shared modules
             */
            'app.layout',
            'app.core',
            /*
             * Feature areas
             */
            'app.users',
            'app.purchases'//This is the module that generates the modulerr error
        ] )
        .config( [ '$locationProvider', hashbagRemove ] );


    function hashbagRemove( $locationProvider ) {

        $locationProvider.html5Mode( true );

    }

})();

This is the module that generates the error:

purchases.module.js

(function () {

    'use strict';

    angular.module( 'app.purchases', [
        'app.purchases.suppliers'
    ] );

})();

suppliers.module.js

(function () {

    'use strict';

    angular.module( 'app.purchases.suppliers', [] );

})();

As you can see i've got a modular application, the thing is that if i load that module the application crashes, i already checked all the controllers and factories to see if there was any mistake there, and all of them are correct, also i already verified that i was loading all the necesary scripts, i don't get why the error persists.

To give you a clearer idea of the structure of my application here's a pic of it:tree

And here's index.html

<!DOCTYPE html>
<html lang="es" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>SOS Control</title>
    <link rel="stylesheet" href="./components/bootstrap/bootstrap-3.1.1.min.css"/>
    <link rel="stylesheet" href="./components/font-awesome/font-awesome-4.4.0.min.css"/>
    <base href="/"/>
</head>
<body>

    <div ui-view></div>

<!--==================================================== SCRIPTS ====================================================-->

    <!----------------------------------------------Other-->
    <!--<script src="./components/lodash/lodash-3.10.1.min.js"></script>-->
    <script src="./components/underscore/underscore-1.8.3.min.js"></script>

    <!---------------------------------------------JQuery-->
    <script src="./components/jquery/jquery-2.1.4.min.js"></script>

    <!--------------------------------------------Angular-->
    <script src="./components/angular/angular-1.4.5.min.js"></script>
    <script src="./components/bootstrap/ui-bootstrap-0.13.4.min.js"></script>
    <script src="./components/angular-ui-router/angular-ui-router-0.2.15.min.js"></script>
    <script src="./components/restangular/restangular-1.5.1.min.js"></script>

    <!---------------------------------------Main Modules-->
    <script src="./app.module.js"></script>
    <script src="./modules/core/core.module.js"></script>
    <script src="./modules/layout/layout.module.js"></script>

    <!---------------------------------------Users Module-->
    <script src="./modules/users/users.module.js"></script>
    <script src="./modules/users/users.routes.js"></script>
    <script src="./modules/users/signin/signin.controller.js"></script>
    <script src="./modules/users/signout/signout.factory.js"></script>

    <script src="./modules/users/account/account.module.js"></script>
    <script src="./modules/users/account/account.routes.js"></script>
    <script src="./modules/users/account/edit-data/edit-data.controller.js"></script>
    <script src="./modules/users/account/reset-password/reset-password.controller.js"></script>

    <!-----------------------------------Purchases Module-->
    <script src="./modules/purchases/purchases.module.js"></script>
    <script src="./modules/purchases/purchases.routes.js"></script>

    <script src="./modules/purchases/suppliers/suppliers.module.js"></script>
    <script src="./modules/purchases/suppliers/suppliers.routes.js"></script>
    <script src="./modules/purchases/suppliers/suppliers-dashboard.controller.js"></script>
    <script src="./modules/purchases/suppliers/create-supplier/create-supplier.factory.js"></script>
    <script src="./modules/purchases/suppliers/create-supplier/create-supplier.controller.js"></script>
    <script src="./modules/purchases/suppliers/read-supplier/read-supplier.factory.js"></script>
    <script src="./modules/purchases/suppliers/read-supplier/read-supplier.controller.js"></script>
    <script src="./modules/purchases/suppliers/update-supplier/update-supplier.factory.js"></script>
    <script src="./modules/purchases/suppliers/update-supplier/update-supplier.controller.js"></script>

</body>
</html>

UPDATE 1

With the updated error (using the dev. version of angular) it seems like the error is generated from this file:

suppliers.routes.js

(function () {
    'use strict';

    angular
        .module( 'app.purchases.suppliers' )

        // Collect the ui-route states
        .constant( 'states', getRouteStates() )

        // Configure the ui-route states and state resolvers
        .config( [ '$stateProvider', '$urlRouterProvider', 'states', stateConfigurator ] );

    function stateConfigurator( $stateProvider, $urlRouterProvider, states ) {

        states.forEach( function ( state ) {

            $stateProvider.state( state.name, state.config );

        } );

        $urlRouterProvider.otherwise( "/" );

    }

    // Define the ui-route states
    function getRouteStates() {
        return [
            {
                name: 'suppliersDashboard',
                config: {
                    url: '/compras/proveedores',
                    templateUrl: './modules/purchases/suppliers/suppliers-dashboard.view.html',
                    title: 'Menu Principal de Proveedores',
                    controller: 'SuppliersDashboardController',
                    controllerAs: 'vm'
                }
            },
            {
                name: 'createSupplier',
                config: {
                    url: '/compras/proveedores/nuevo',
                    templateUrl: './modules/purchases/suppliers/create-supplier/create-supplier.view.html',
                    title: 'Nuevo Proveedor',
                    controller: 'CreateSupplierController',
                    controllerAs: 'vm'
                }
            },
            {
                name: 'listSupplier',
                config: {
                    url: '/compras/proveedores/listado',
                    templateUrl: './modules/purchases/suppliers/read-supplier/list-supplier.view.html',
                    title: 'Listado de Proveedores',
                    controller: 'ReadSupplierController',
                    controllerAs: 'vm'
                }
            },
            {
                name: 'detailSupplier',
                config: {
                    url: '/compras/proveedores/:supplierId/:supplierName',
                    templateUrl: './modules/purchases/suppliers/read-supplier/detail-supplier.view.html',
                    title: 'Detalles del Proveedor',
                    controller: 'ReadSupplierController',
                    controllerAs: 'vm'
                }
            },
            {
                name: 'updateSupplier',
                config: {
                    url: '/compras/proveedores/:supplierId/:supplierName/editar',
                    templateUrl: './modules/purchases/suppliers/update-supplier/update-supplier.view.html',
                    title: 'Editar Proveedor',
                    controller: 'UpdateSupplierController',
                    controllerAs: 'vm'
                }
            }
        ];
    }

})();

What i do is that i create a constant in each module called states where i store the states properties (i'm using ui-router), then in the module.config i iterate over the constant states to add the states to the $stateProvider.

Something that i think that might be causing the trouble is that in every module i declare the same constant, states, can't two different modules have constants with the same name?

Solution

  • The problem was that i declared an empty json array at purchases.routes.js:

    (function () {
'use strict';

angular.module('app.purchases')

    // Collect the ui-route states
    .constant('states', getRouteStates())

    // Configure the ui-route states and state resolvers
    .config(['$stateProvider', '$urlRouterProvider', 'states', stateConfigurator]);

function stateConfigurator($stateProvider, $urlRouterProvider, states) {

    states.forEach(function (state) {

        $stateProvider.state(state.name, state.config);

    });

    $urlRouterProvider.otherwise("/");

}

// Define the ui-route states
function getRouteStates() {
    return [
        {}//THIS WAS THE ERROR
    ];
}

})();

    When iterating through the states constant that array didn't have any property, so that it couldn't find state.nameand state.config.

    Thanks @charlietfl i could solve this when i saw the complete error when using development version of Angular.