`$injector:modulerr` when Importing submodule in angularjs

Question

I am having some trouble importing my sub-module when using the AngularJS framework.

I have created the module and its dependencies, checked my import order and imported the js files in the index.html <script> tag.

When my server attempts to render my page I get a $injector:modulerr

The stack trace points at bower, however all my bower components are present.

I am unsure how to debug this issue.

I have the directory structure:

app.js
hmodule/
hmodule/helpermonkeys.js
hmodule/services/monkeymessageservice.js
hmodule/controllers/monkeycontroller.js

/app.js:

var centroApp = angular.module("centroApp", ['ngRoute', ..., 'ngWebSocket', 'helpermonkeys'])

/hmodule/hm.js

(function() {                                                                                                                                             
    'use strict';                                                                                                                                             
    angular.module('helpermonkeys', ['ngWebSocket', 'monkeyMessageService', 'monkeyController']);                                                    
})();

/hmodule/services/monkeymessageservice.js

(function() {                                                                                                                                                 
    'use strict';                                                                                                                                             
    angular.module('helpermonkeys').factory('monkeyMessageService', ['ngWebSocket', monkeyMessageService]);                                                   

    function monkeyMessageService($websocket) {                                                                                                               
        var messageService = {                                                                                                                                
            connect: connect,                                                                                                                                 
            sendActuatorRequest: sendActuatorRequest,                                                                                                         
            sendDataRequest: sendDataRequest,                                                                                                                 
            sendCommandRequest: sendCommandRequest,                                                                                                           
            messages: []                                                                                                                                      
        }                                                                                                                                                     

        return messageService;   
        ...
})();

/hmmodule/controllers/monekeycontroller.js

(function() {                                                                                                                                                 
    'use strict';                                                                                                                                             
    angular.module('helpermonkeys').controller('monkeyController', ['$scope', 'monkeyMessageService', monkeyController]); 
 ....
})();

index.html

    <script src="/js/helpermonkeysmodule/helpermonkeys.js"></script>                                                                                          
    <script src="/js/helpermonkeysmodule/services/monkeymessageservice.js"></script>                                                                          
    <script src="/js/helpermonkeysmodule/controllers/monkeycontroller.js"></script>
    <script src="/js/app.js"></script>

Stack Trace

Failed to instantiate module centroApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.9/$injector/modulerr?p0=h...)
    at https://localhost/bower_components/angular/angular.min.js:6:412
    at https://localhost/bower_components/angular/angular.min.js:40:292
    at q (https://localhost/bower_components/angular/angular.min.js:7:359)
    at g (https://localhost/bower_components/angular/angular.min.js:39:382)
    at https://localhost/bower_components/angular/angular.min.js:40:34
    at q (https://localhost/bower_components/angular/angular.min.js:7:359)
    at g (https://localhost/bower_components/angular/angular.min.js:39:382)
    at eb (https://localhost/bower_components/angular/angular.min.js:43:382)
    at c (https://localhost/bower_components/angular/angular.min.js:21:19)
    at Ic (https://localhost/bower_components/angular/angular.min.js:21:332

Error URL:

https://docs.angularjs.org/error/$injector/modulerr?p0=helpermonkeys&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.5.9%2F$injector%2Fmodulerr%3Fp0%3DmonkeyMessageService%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.5.9%252F%2524injector%252Fnomod%253Fp0%253DmonkeyMessageService%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%252Fbower_components%252Fangular%252Fangular.min.js%253A6%253A412%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%252Fbower_components%252Fangular%252Fangular.min.js%253A25%253A235%250A%2520%2520%2520%2520at%2520b%2520(https%253A%252F%252Flocalhost%252Fbower_components%252Fangular%252Fangular.min.js%253A24%253A282)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%252Fbower_components%252Fangular%252Fangular.min.js%253A25%253A20%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%252Fbower_components%252Fangular%252Fangular.min.js%253A40%253A17%250A%2520%2520%2520%2520at%2520q%2520(https%253A%252F%252Flocalhost%252Fbower_components%252Fangular%252Fangular.min.js%253A7%253A359)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Flocalhost%252Fbower_components%252Fangular%252Fangular.min.js%253A39%253A382)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Flocalhost%252Fbower_components%252Fangular%252Fangular.min.js%253A40%253A34%250A%2520%2520%2520%2520at%2520q%2520(https%253A%252F%252Flocalhost%252Fbower_components%252Fangular%252Fangular.min.js%253A7%253A359)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Flocalhost%252Fbower_components%252Fangular%252Fangular.min.js%253A39%253A382)%0A%20%20%20%20at%20https:%2F%2Flocalhost%2Fbower_components%2Fangular%2Fangular.min.js:6:412%0A%20%20%20%20at%20https:%2F%2Flocalhost%2Fbower_components%2Fangular%2Fangular.min.js:40:292%0A%20%20%20%20at%20q%20(https:%2F%2Flocalhost%2Fbower_components%2Fangular%2Fangular.min.js:7:359)%0A%20%20%20%20at%20g%20(https:%2F%2Flocalhost%2Fbower_components%2Fangular%2Fangular.min.js:39:382)%0A%20%20%20%20at%20https:%2F%2Flocalhost%2Fbower_components%2Fangular%2Fangular.min.js:40:34%0A%20%20%20%20at%20q%20(https:%2F%2Flocalhost%2Fbower_components%2Fangular%2Fangular.min.js:7:359)%0A%20%20%20%20at%20g%20(https:%2F%2Flocalhost%2Fbower_components%2Fangular%2Fangular.min.js:39:382)%0A%20%20%20%20at%20https:%2F%2Flocalhost%2Fbower_components%2Fangular%2Fangular.min.js:40:34%0A%20%20%20%20at%20q%20(https:%2F%2Flocalhost%2Fbower_components%2Fangular%2Fangular.min.js:7:359)%0A%20%20%20%20at%20g%20(https:%2F%2Flocalhost%2Fbower_components%2Fangular%2Fangular.min.js:39:382

Thanks to @charlietfl for pointing out the offending file can be found in the URL, I am going to investigate my Messaging service.

Follow the stack trace in the angular url error links, it will tell you which module is the culprit. — bamtheboozle
– bamtheboozle, Commented Nov 26, 2017 at 20:11
The stack trace indicated there is a bower issue. I will update with stack trace, but its not very useful. — Babbleshack
– Babbleshack, Commented Nov 26, 2017 at 20:12
module name is in first line of error where you cut it off with ... . Can also be cause by a syntax error — charlietfl
– charlietfl, Commented Nov 26, 2017 at 20:35
Looks like monkeyMessageService does not exist as a module in your application for some reason. — itamar
– itamar, Commented Nov 26, 2017 at 20:51

Babbleshack · Accepted Answer · 2017-11-26 20:58:00Z

0

Looks like there is an issue with my monkeymessageservice. The question is a bit of rubbish one, the issue is my inexperience :p.

For reference the URL returned by the Angularjs includes the offending module.

answered Nov 26, 2017 at 20:58

Babbleshack

3411 gold badge5 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

`$injector:modulerr` when Importing submodule in angularjs

/app.js:

/hmodule/hm.js

/hmodule/services/monkeymessageservice.js

/hmmodule/controllers/monekeycontroller.js

index.html

Stack Trace

Error URL:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

/app.js:

/hmodule/hm.js

/hmodule/services/monkeymessageservice.js

/hmmodule/controllers/monekeycontroller.js

index.html

Stack Trace

Error URL:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related