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的主要内容,如果未能解决你的问题,请参考以下文章

angularjs和requirejs整合

Requirejs 和 AngularJS 中依赖注入

基于angularJS和requireJS的前端架构

AngularJs与RequireJs整合

requirejs 和 angularjs 1.5 注入 ui.router 组件失败

AngularJS分别RequireJS做文件合并压缩的那些坑