AngularJS 和 RequireJS - 未捕获的错误:没有模块:MyApp
Posted
技术标签:
【中文标题】AngularJS 和 RequireJS - 未捕获的错误:没有模块:MyApp【英文标题】:AngularJS and RequireJS - Uncaught Error: No module: MyApp 【发布时间】:2014-09-05 09:52:52 【问题描述】:我正在尝试使用 requireJS 创建一个新的 Angular 项目。
这是我的 index.html:
<!doctype html>
<html ng-app="MainApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script data-main="js/requirejs.config.js" src="common/lib/requirejs/require.js"></script>
<title>'TITLE' | translate</title>
<link rel="stylesheet" href="common/lib/bootstrap-3.1.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body ng-controller="MainCtrl" ng-cloak class="ng-cloak">
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>'HELLO' | translate
</button>
</body>
</html>
这是我的 requirejs.config.js:
require.config(
baseUrl: 'common',
paths:
angular : 'lib/angular-1.2.19/angular',
jquery : 'lib/jquery/jquery-2.1.1',
uibootstrap : 'lib/ui-bootstrap-0.11.0/ui-bootstrap-tpls-0.11.0',
bootstrap : 'lib/bootstrap-3.1.1-dist/js/bootstrap',
app : '../js/app',
config : '../js/config'
,
shim :
angular :
exports: 'angular'
,
jquery :
exports: 'jquery'
,
uibootstrap :
exports: 'uibootstrap'
,
bootstrap :
exports: 'bootstrap'
,
// To remove urlArgs on production
urlArgs: "v=" + (new Date()).getTime() * Math.random()
);
require([
'../js/MainCtrl'
]);
在加载了 index.html 的浏览器上,每按 F5 的第二次点击我都会收到错误消息:
"[$injector:nomod] Module 'MainApp' 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.
有什么想法吗?
P.S - 删除 ng-app="MainApp" 标记并在加载 dom 后手动引导 angular 可以解决它,但我害怕我做错了什么并想确保
编辑 - 这是我的 app.js:
define(["angular", "config"], function(angular)
return angular.module('MainApp', ['common']);
);
这是我的 config.js:
define([
"angular",
"constants/constants",
"values/values",
"filters/filters",
"services/services",
"factories/factories",
"directives/directives",
"providers/providers",
"controllers/controllers"
], function(angular)
return angular.module('common', [
'common.factories',
'common.services',
'common.directives',
'common.providers',
'common.constants',
'common.values',
'common.controllers',
'common.filters'
]);
);
【问题讨论】:
你有没有名为common
的模块?
【参考方案1】:
只需检查直接父文件夹的名称中是否有任何空格字符,就我而言 - 我的文件夹结构类似于.../In Progress/AngularSample/
我遇到了同样的问题,显然代码中没有问题,我最终将父文件夹名称从“In Progress”更改为“In-Progress”,它开始正常工作!
【讨论】:
以上是关于AngularJS 和 RequireJS - 未捕获的错误:没有模块:MyApp的主要内容,如果未能解决你的问题,请参考以下文章