Angular 不加载模块 - $injector:modulerr答案

【问题标题】：Angular doesn't load a module - $injector:modulerrAngular 不加载模块 - $injector:modulerr
【发布时间】：2015-10-19 09:37:02
【问题描述】：

我的应用程序出现以下错误：

只有在加载特定模块时才会出现问题，这是我的主模块：

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 );

    }

})();

这是产生错误的模块：

purchases.module.js

(function () {

    'use strict';

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

})();

suppliers.module.js

(function () {

    'use strict';

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

})();

正如你所看到的，我有一个模块化应用程序，问题是如果我加载该模块应用程序崩溃，我已经检查了所有控制器和工厂，看看那里是否有任何错误，所有这些都是正确，我也已经验证我正在加载所有必要的脚本，我不明白为什么错误仍然存在。

为了让您更清楚地了解我的应用程序的结构，这里有一张图片：

这里是 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>

更新 1

使用更新后的错误（使用 angular 的开发版本），错误似乎是从此文件生成的：

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'
                }
            }
        ];
    }

})();

我所做的是在每个名为 states 的模块中创建一个常量，在其中存储状态属性（我使用的是 ui-router），然后在 module.config 中迭代常量状态以添加状态为$stateProvider。

我认为可能导致问题的原因是，在每个模块中我声明了相同的常量states，两个不同的模块不能有同名的常量吗？

【问题讨论】：

所以app.purchases 依赖模块app.purchases.suppliers 有问题。定义好了，能不能也显示一下那个模块的定义？
使用 Angular 的开发版本来获得更详细的错误和堆栈跟踪输出。然后用实际显示的错误更新问题
@charlietfl 你能告诉我在哪里得到开发版本，我找不到它......
@l0lander 是的，app.purchases.suppliers 已声明并加载
@l0lander 刚刚在帖子中添加了app.purchases.suppliers 模块的声明

标签： angularjs angular-module

【解决方案1】：

我看到您正在使用 模块模式，这很好。

糟糕的是，在app.purchases 模块调用的那一刻，也就是脚本被编译（从index.html 加载）之后的那一刻，app.purchases.suppliers 没有被编译。

解决方案：这里的顺序很重要，因为这些脚本会按照您在index.html 中引用它们的顺序执行。

将引用app.purchases.suppliers 模块定义的<script>...</script> 元素移到引用app.purchases 模块的元素之上。
确保链接到其模块的单元（服务、控制器、指令...）紧跟在包含其链接模块定义的文件之后。
最后引用使用所有其他模块的主模块文件，然后是它自己的单元（服务、控制器、指令、配置...）
对于模块本身的依赖关系也遵循此规则（如果控制器正在使用某些服务，请确保在控制器上方引用该服务）

建议：始终首先引用 - 包含不依赖于其他单位的单位的文件。为了不再担心这个，你可以考虑使用requireJS

【讨论】：

这绝对行不通，我照你说的做了，现在它抛出了很多$injector:nomod的错误
另外，我如何在我的结构中使用 react.js？
它是requirejs。但是我确定问题就在这里，如果错误的数量发生变化，则意味着您正在找出正确的顺序，只需按照我上面写的规则;）
哦，抱歉，jaja，require.js 看起来不错，您能否通过使用它的示例更新您的答案？
我已经解决了问题，但你的观点似乎是逻辑，我不明白的是Make sure that units (services, controllers, directives...) linked to their module come right after the file that contains their linked module definition.是什么意思？例如，如果我有模块 x 和子模块 xx 和服务 xxservice 我应该按什么顺序加载它们？

【解决方案2】：

问题是我在 purchases.routes.js 声明了一个空的 json 数组：

(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
    ];
}

})();

在遍历states 常量时，该数组没有任何属性，因此找不到state.name 和state.config。

感谢@charlietfl，当我在使用 Angular 的开发版本时看到完全错误时，我可以解决这个问题。

【讨论】：