RequireJS + Angular 错误：[$injector:modulerr] 无法实例化模块 helloWorld答案

【问题标题】：RequireJS + Angular Error: [$injector:modulerr] Failed to instantiate module helloWorldRequireJS + Angular 错误：[$injector:modulerr] 无法实例化模块 helloWorld
【发布时间】：2016-07-18 23:42:34
【问题描述】：

我正在使用 requirejs 和 angularJS 来构建一个简单的应用程序，但是我每次都遇到这个错误，我尝试从 js 引导 angular（仍然在要查看的代码上），更改 deps，在应用程序上需要 angular .js，但没有一个工作。有人可以帮我吗？

main.js

requirejs.config({
    paths: {
        jquery: './lib/jquery/jquery.min',
        angular: './lib/angular/angular',
        bootstrap: './lib/bootstrap/dist/js/bootstrap.min',
        app: './app/app',
        custom: './lib/custom/custom'
    },
    shim: {
        'angular': {
            'exports': 'angular'
        },
        'jquery': {
            'exports': 'jquery'
        },
        'bootstrap': {
            deps: ['jquery']
        },
        'app': {
            deps: ['angular']
        },
        'custom': {
            deps: ['jquery']
        }
    }
});

define(['require', 'jquery', 'angular', 'bootstrap', 'app', 'custom'],
    require(['require', 'jquery'], function (require, $) {
    $(document).ready(function () {
        require(
                ['angular', 'app', 'custom', 'bootstrap']
            , function (angular, document) {
                angular.bootstrap(document, ['helloWorld']);
            });
    });
}));

app.js

angular.module("helloWorld", []);
angular.module("helloWorld").controller("helloWorldCtrl", function ($scope) {
        $scope.message = "Hello World!";
});

index.html

<html ng-app="helloWorld">
<head>
    <title>Hello World</title>
    <script data-main="main" src="lib/requirejs/require.js"></script>
</head>
<body>
    <div ng-controller="helloWorldCtrl">
        {{message}}
    </div>
</body>
</html>

错误信息：

Error: [$injector:modulerr] Failed to instantiate module helloWorld due to:
[$injector:nomod] Module 'helloWorld' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.7/$injector/nomod?p0=helloWorld
minErr/<@http://localhost:8000/lib/angular/angular.js:68:12
module/<@http://localhost:8000/lib/angular/angular.js:2075:17
ensure@http://localhost:8000/lib/angular/angular.js:1999:38
module@http://localhost:8000/lib/angular/angular.js:2073:14
loadModules/<@http://localhost:8000/lib/angular/angular.js:4608:22
forEach@http://localhost:8000/lib/angular/angular.js:321:11
loadModules@http://localhost:8000/lib/angular/angular.js:4592:5
createInjector@http://localhost:8000/lib/angular/angular.js:4514:19
bootstrap/doBootstrap@http://localhost:8000/lib/angular/angular.js:1751:20
bootstrap@http://localhost:8000/lib/angular/angular.js:1772:12
angularInit@http://localhost:8000/lib/angular/angular.js:1657:5
@http://localhost:8000/lib/angular/angular.js:31468:5
b.Callbacks/c@http://localhost:8000/lib/jquery/jquery.min.js:3:7852
b.Callbacks/p.add@http://localhost:8000/lib/jquery/jquery.min.js:3:8167
b.prototype.ready@http://localhost:8000/lib/jquery/jquery.min.js:3:2054
@http://localhost:8000/lib/angular/angular.js:31467:3
@http://localhost:8000/lib/angular/angular.js:6:2

http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=helloWorld&p1=%5B%24injector%3Anomod%5D%20Module%20'helloWorld'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.7%2F%24injector%2Fnomod%3Fp0%3DhelloWorld%0AminErr%2F%3C%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A68%3A12%0Amodule%2F%3C%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A2075%3A17%0Aensure%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A1999%3A38%0Amodule%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A2073%3A14%0AloadModules%2F%3C%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A4608%3A22%0AforEach%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A321%3A11%0AloadModules%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A4592%3A5%0AcreateInjector%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A4514%3A19%0Abootstrap%2FdoBootstrap%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A1751%3A20%0Abootstrap%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A1772%3A12%0AangularInit%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A1657%3A5%0A%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A31468%3A5%0Ab.Callbacks%2Fc%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fjquery%2Fjquery.min.js%3A3%3A7852%0Ab.Callbacks%2Fp.add%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fjquery%2Fjquery.min.js%3A3%3A8167%0Ab.prototype.ready%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fjquery%2Fjquery.min.js%3A3%3A2054%0A%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A31467%3A3%0A%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A6%3A2%0A

【问题讨论】：

标签： javascript angularjs requirejs

【解决方案1】：

问题是，在引导 helloWorld 模块之前，您必须确保它已创建且可用。似乎当应用程序启动时 helloWorld 模块不可用。

试试下面的代码：

main.js

    requirejs.config({
    paths: {
        jquery: './lib/jquery/jquery.min',
        angular: './lib/angular/angular',
        bootstrap: './lib/bootstrap/dist/js/bootstrap.min',
        app: './app/app',
        custom: './lib/custom/custom'
    },
    shim: {
        'angular': {
            'exports': 'angular'
        },
        'jquery': {
            'exports': 'jquery'
        },
        'bootstrap': {
            deps: ['jquery']
        },
        'app': {
            deps: ['angular']
        },
        'custom': {
            deps: ['jquery']
        }
    }
});

require(['app'], function (app) {
});

app.js

define(['angular'], function (angular) {
  'use strict';

  angular.module('helloWorld', [])
  .controller("helloWorldCtrl", function ($scope) {
      $scope.message = "Hello World!";
  });

  angular.bootstrap(document, ['helloWorld']);
});

index.html

<html >
<head>
    <title>Hello World</title>
    <script data-main="main" src="lib/requirejs/require.js"></script>
</head>
<body >
    <div ng-controller="helloWorldCtrl">
        {{message}}
    </div>
</body>
</html>

应该可以了！

【讨论】：

用一点代码优化更新了代码。这是工作部分，我相信会帮助您解决问题。