Error: $injector:modulerr Module Error

Asked

Viewed 1,497 times

3

In a project I’m developing, I’m including the files:

app js.

angular.module('app', [
    'app.controllers',
    'app.services'
]

controller js.

angular.controller('HomeController', function($scope, HomeService)
{
    // code
})

services.js

angular.service('HomeService', function()
{
    // code
})

html template.

<html ng-app="app">
    <head>
        // scripts
    </head>
    <body ng-controller="HomeController">

        // body

    </body>
</html>

When I open the page I see the error:

Error: $injector:modulerr

I searched the Google and in the few researches I found where it was the same mistake I’m having, I couldn’t find a solution to it. Some say that some module or something is missing, but as I showed, everything is inserted and the names are correct.

What could I be doing wrong ?

angularjs

2 answers

3

If your code is exactly as described, you at no time declared these modules 'app controllers.' and 'app services.' thus causing the injection problem.

Following the line of your code, it should look something like this:

app js.

angular.module('app', [
    'app.controllers', 
     'app.services'
]);

controller js.

angular.module('app.controllers')
      .controller('HomeCtrl', ['$scope', function($scope) {
        // código aqui
      }]);

service js.

angular.module('app.services')
   .service('HomeService', [function] {
   // código aqui
   });

This way, the modules you injected as dependency are declared. You could also do as follows:

controller js.

var appControllers = angular.module('app.controllers');
appControllers.controller('HomeCtrl', [function () {
  // código aqui
}]);

If you want to add more controllers / services (use the same principle for declaration):

controller js.

angular.module('app.controllers')
      .controller('HomeCtrl', ['$scope', function($scope) {
        // código aqui
      }])
      .controller('OutroCtrl', [function () {
       // mais código aqui
      }])
;

or in this way:

var appControllers = angular.module('app.controllers');

appControllers.controller('HomerCtrl', [function () {
 //código aqui
}]);

appControllers.controller('OutroCtrl', [function () {
 // mais código aqui
}]);

I hope this resolves!

  • 1

    Complementing the answer: This is possible because angular.module returns the module object to which controllers and services will be applied

  • 1

    But you won’t be able to access app.controllers if you have not registered them before, you will give the same error

  • Really solved my problem. Thank you!

3

The @Marco Antônio response concept is correct, but it contains some compilation errors, so I’m going to go through a simpler way of doing:

Ah, and another thing, you don’t need to attach the modules app.controllers and app.services if you are not creating them, but registering controllers and services directly in the main module.

Just Copy'n' Paste

var app = angular.module('app',[]);

app.controller('HomeController',function($scope){
    //codigo aqui
});

app.service('HomeService', function(){
    //codigo aqui
});

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.