AngularJS 错误：$injector modulerr答案

【问题标题】：AngularJS Error:$injector modulerrAngularJS 错误：$injector modulerr
【发布时间】：2015-11-04 22:34:08
【问题描述】：

我正在尝试运行一个基于 MEAN 堆栈网络书的简单 CRM 应用程序。加载页面后，我在控制台中收到以下错误：

Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=userApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.7%2F%24injector%2Fmodulerr%3Fp0%3DuserCtrl%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.7%252F%2524injector%252Fnomod%253Fp0%253DuserCtrl%250AI%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A6%253A416%250Ade%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A24%253A186%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A23%253A252%250Ade%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A23%253A1%250Ah%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A427%250Am%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A7%253A320%250Ah%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A275%250Ah%252F%253C%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A444%250Am%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A7%253A320%250Ah%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A37%253A275%250Afb%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A41%253A35%250Azc%252Fd%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A19%253A463%250Azc%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A20%253A274%250AZd%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A19%253A83%250A%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A293%253A238%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A174%253A399%250AHf%252Fc%2540http%253A%252F%252Flocalhost%253A8080%252Fassets%252Flibs%252Fangular%252Fangular.min.js%253A35%253A212%250A%0AI%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A6%3A416%0Ah%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A38%3A184%0Am%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A7%3A320%0Ah%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A275%0Ah%2F%3C%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A444%0Am%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A7%3A320%0Ah%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A37%3A275%0Afb%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A41%3A35%0Azc%2Fd%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A463%0Azc%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A20%3A274%0AZd%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A19%3A83%0A%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A293%3A238%0Aa%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A174%3A399%0AHf%2Fc%40http%3A%2F%2Flocalhost%3A8080%2Fassets%2Flibs%2Fangular%2Fangular.min.js%3A35%3A212%0A


angular.min.js (line 6, col 416)

这是我的 app.js 文件（主应用模块）

angular.module('userApp', [
    'ngAnimate',
    'app.routes',
    'authService',
    'mainCtrl',
    'userCtrl',
    'ngRoute',
    'userService'
    ]);

还有我的 index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>User CRM</title>
        <base href="/">

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/custom/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
        <link rel="stylesheet" href="assets/cs/style.css">

        <script type="text/javascript" src="assets/libs/angular/angular.min.js"></script>
        <script type="text/javascript" src="assets/libs/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="assets/libs/angular-animate/angular-animate.min.js"></script>

        <script type="text/javascript" src="app/controllers/mainCtrl.js"></script>
        <script type="text/javascript" src="app/controllers/userCtrl.js"></script>

        <script type="text/javascript" src="app/services/authService.js"></script>
        <script type="text/javascript" src="app/services/userService.js"></script>

        <script type="text/javascript" src="app/app.routes.js"></script>
        <script type="text/javascript" src="app/app.js"></script>
    </head>

    <body ng-app="userApp" ng-controller="mainController as main">
        <header>
            <div class="navbar navbar-inverse" ng-if="main.loggedIn">
                <div class="container">
                    <div class="navbar-header">
                        <a href="/" class="navbar-brand"><span class="glyphicon glyphicon-fire text-danger"></span> User CRM</a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li><a href="/users"><span class="glyphicon glyphicon-user"></span> Users</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li ng-if="!main-loggedIn"><a href="/login">Login</a></li>
                        <li ng-if="main.loggedIn" class="navbar-text">Hello {{ main.user.name }}!</li>
                        <li ng-if="main.loggedIn"><a href="#" ng-click="main.doLogout()">Logout</a></li>
                    </ul>
                </div>
            </div>
        </header>
        <main class="container">
            <div ng-view></div>
        </main>
    </body>
</html>

我已经使用 bower (angular, angular-route, angular-animate) 加载了本地依赖项，其余的是本地 .js 文件，所以我无法真正弄清楚问题所在。

整个项目可以在这个Git Repo找到。代码的角部分位于 /public 文件夹中。

任何反馈/想法表示赞赏。

【问题讨论】：

标签： angularjs

【解决方案1】：

你正试图在你的应用程序中注入 userCtrl，我在你的 git repo 中找不到它

angular.module('userApp', [
'ngAnimate',
'app.routes',
'authService',
'mainCtrl',
'userCtrl',
'ngRoute',
'userService'
]);

Angular DI 正在寻找服务/控制器/工厂任何名称为 userCtrl 的组件，但它无法找到。

Angular DI 不查找文件，而是查找带有组件字符串名称的组件。

【讨论】：

【解决方案2】：

您的控制器和您的服务必须是您的userApp 模块的一部分，而不是分隔MainCtrl 或userService 模块。

改变

// This declares a new module named 'mainCtrl'
angular.module('mainCtrl', [])

angular.module('userService', [])

angular.module('autService', [])

到

angular.module('userApp')

【讨论】：