angular.js 和 require.js 得到未捕获的错误：[$injector:modulerr]
Posted
技术标签:
【中文标题】angular.js 和 require.js 得到未捕获的错误：[$injector:modulerr]【英文标题】：angular.js with require.js getting Uncaught Error: [$injector:modulerr] 【发布时间】：2013-10-10 22:18:06 【问题描述】：我正在尝试将 require.js 与 Main.js 一起使用并出现以下错误：
未捕获的错误：[$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=MyApp&p1=Error%3…3A8080%2FResults%2Fresources%2Fjs%2Fvendor%2Fangular.min.js%3A31%3A252)
我的 Main.js
require.config(
// alias libraries paths
paths:
'angular': 'vendor/angular.min',
'jquery': 'vendor/jquery-1.8.0-min',
'angularroute': 'vendor/angular-route'
,
// angular does not support AMD out of the box, put it in a shim
shim:
'angular':
deps: ['jquery'],
exports: 'angular'
,
'angularroute':
deps:['angular']
);
require([
'angular',
'angularroute',
'app'
],
function(angular, angularroute, app)
'use strict';
)
我的 app.js
define(['angular'], function(angular)
return angular.module('MyApp',['ngRoute']);
);
我收到一条错误消息，提示我需要将 angularroute 添加到我的应用程序中，但我仍然收到此错误消息。谁能指出我可能做错了什么？
【问题讨论】：
【参考方案1】：我在这里找到了解决方案：https://github.com/tnajdek/angular-requirejs-seed/blob/master/app/js/main.js
来自文档： http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap
window.name = "NG_DEFER_BOOTSTRAP!";
require(['angular', 'angularroute', 'app'], function(angular, angularroute, app)
'use strict';
//after you are done defining / augmenting 'MyApp' run this:
angular.element().ready(function()
angular.resumeBootstrap([app['name']]);
);
)
【讨论】：
这在“angular.resumeBootstrap”处给我一个“未定义不是函数”错误【参考方案2】：这是我的需求配置，require_config.js:
var require =
baseUrl: '/js',
paths:
'angular': 'lib/angular.min',
'angular.route': 'lib/angular-route.min',
'angular.resource': 'lib/angular-resource.min',
'angular.animate': 'lib/angular-animate.min',
'angular.ui.bootstrap': 'lib/ui-bootstrap-tpls-0.6.0.min',
'angular.upload': 'lib/ng-upload.min',
'jquery': 'lib/jquery-1.10.2.min'
,
shim:
'angular': ['jquery'],
'angular.route': ['angular'],
'angular.resource': ['angular'],
'angular.animate': ['angular'],
'angular.ui.bootstrap': ['angular'],
'angular.upload': ['angular'],
'my.angular': ['angular', 'angular.route', 'angular.resource', 'angular.animate', 'angular.ui.bootstrap', 'angular.upload']
;
我的script标签在html <head>:
<script src="/js/require-config.js"></script>
<script src="/js/lib/require.js"></script>
来自服务器端的页面可以使用 Angular 或 jQuery，两者都使用，或者不使用……所以，HTML 标记可能包含一个简单的标签来最终激活整个 Angular 结构，如下所示：
<script>require(['myApp']);</script>
现在，在myApp.js，我只依赖 my.angular，它负责加载其他所有内容……事实上，我还有其他风格的“my.angular”，其中不同的子集，我在网站的不同上下文中使用：
define(['my.angular'], function()
var myApp = angular.module('myApp', ['ngRoute', 'ngResource', 'ngAnimate', 'ngUpload', 'ui.bootstrap']);
// more app module stuff here, including bootstrap
return myApp;
);
【讨论】：
这对配置的要求抛出错误。在加载 requirejs 之前，我不确定您将如何在配置中使用 require。 上面的代码运行良好。您只需在加载 RequireJS 之前 的配置中定义一个名为require 的变量。当 RequireJS 加载时，它将使用 require 变量作为配置。
啊，是的，我知道你现在在做什么。我错过了那里的 var。【参考方案3】：
angular 被定义为全局变量，您的声明将覆盖它。文件angular.js 不返回任何内容，因此在 RequireJS 级别没有可注入的内容。请尝试以下操作：
define(['angular'], function()
return angular.module('MyApp',['ngRoute']);
);
我在 RequireJS 和 AngularJS 上苦苦挣扎，所以我创建了 angularAMD 来帮助我：http://marcoslin.github.io/angularAMD/
【讨论】：
这样做不会使用 deps: ["app"] 加载我的 app.js 文件。我也不明白使用 angularAMD include 的原因。如果你想让这件事变得简单，为什么要额外添加一个我至少不知道它是什么的东西。【参考方案4】：您的设置看起来不错，除了您需要在 app.js 文件的 define 部分中添加 angularroute 作为依赖项。您提到了这一点，但没有在您的示例代码中反映这一点。
define(['angular', 'angularroute'], function(angular)
return angular.module('MyApp',['ngRoute']);
);
【讨论】：
以上是关于angular.js 和 require.js 得到未捕获的错误：[$injector:modulerr]的主要内容，如果未能解决你的问题，请参考以下文章