angularjsangularjs-injector

Error: $injector:modulerr Module Error using separate .js files


Looked at all the other answers as is doing my head in.

My 'app.js':

angular.module('app', [
    'imageCtrlController',
    'adminCreateController',
    'ui.bootstrap',
    'ngRoute'
]);

My other .js file with config and two controllers:

angular.module("app").config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider
        .when('/', {
            template: 'One moment please.'
        })
        .when('/imageCtrl', {
            templateUrl: '/admin/imagecontrol',
            controller: 'imageCtrlController'
        })
}]); 

angular.module("app").controller('adminCreateController', function AdminCreateController($scope, $http) {
    $scope.admin = {};
    console.log("hello");
    $scope.createNewAdmin = function () {
        var admin = $.param($scope.admin);
        var config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            }
        }

        $http.post('/admin/CreateAdmin', admin, config)
            .then(
            function (response) {
                console.log(response);
            });
    }
});
angular.module("app").controller('imageCtrlController', function ImageCtrlController($scope, $http) {
    alert("yo");
});

In my _Layout:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
            <script src="~/js/ui-bootstrap-tpls-2.5.0.min.js"></script>
            <script src="~/js/AngularControllers/app.js"></script>
            <script src="~/js/AngularControllers/adminController.js"></script>

I initialise the ng-app in the body of my _Layout and then for the div of my View. 'ng-controller="imageCtrlController"'

The admin controller worked fine until I moved it into a separate file.

The error I get is:

Error: $injector:modulerr Module Error

Stack trace:

    Failed to instantiate module app due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=i...)
    at http://localhost:2808/js/angular.min.js:6:425
    at http://localhost:2808/js/angular.min.js:42:407
    at q (http://localhost:2808/js/angular.min.js:7:495)
    at g (http://localhost:2808/js/angular.min.js:41:476)
    at http://localhost:2808/js/angular.min.js:42:149
    at q (http://localhost:2808/js/angular.min.js:7:495)
    at g (http://localhost:2808/js/angular.min.js:41:476)
    at eb (http://localhost:2808/js/angular.min.js:46:44)
    at c (http://localhost:2808/js/angular.min.js:21:373)
    at Sc (http://localhost:2808/js/angular.min.js:22:179

This error occurs when a module fails to load due to some exception. The error message above should provide additional context.

A common reason why the module fails to load is that you've forgotten to include the file with the defined module or that the file couldn't be loaded.


Solution

  • The second parameter of angular.module is used to include other angular modules. You're trying to include your controllers as such:

    angular.module('app', [
        'imageCtrlController', // not a module
        'adminCreateController', // ...also not a module
        'ui.bootstrap', // is a module
        'ngRoute' // ...is as well
    ]);
    

    Corrected:

    angular.module('app', [
        'ui.bootstrap',
        'ngRoute'
    ]);