CODEWITHSUNDEEP
angularjs
Miha Šušteršič
Miha Šušteršič

Reputation: 10052

AngularJS Error:$injector modulerr

I'm trying to run a simple CRM app, based on the MEAN stack web-book. Upon loading the page I get the following error in the console:

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)

This is my app.js file (the main app module)

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

and my 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>

I have loaded the local dependencies using bower (angular, angular-route, angular-animate), and the rest of the are local .js files, so I can't really figure out what the problem is.

The whole project can be found at this Git Repo. The angular part of the code is located in the /public folder.

Any feedback/ideas appreciated.

Upvotes: 0

Views: 865

Answers (2)

Komo
Komo

Reputation: 2138

Your controller and your services have to be part of your userApp module, not separates MainCtrlor userService modules.

Change

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

angular.module('userService', [])

angular.module('autService', [])

to 

angular.module('userApp')

Upvotes: 0

mayankbatra
mayankbatra

Reputation: 2678

You are trying to inject userCtrl in your app, I could not find it in the git repo you 

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

Angular DI, is looking for a service / controller / factory any component that is names userCtrl, which it can not find.

Angular DI does not look for files, rather components with the string names of your components.

Upvotes: 0

Related Questions