Pushpendra Pushpendra - 5 months ago 11
AngularJS Question

Failing to inject an angular component

So what I am trying to do here is make an angular component and get it injected to my angular app.
Here is the code for the angular component:

(function(angular) {
'use strict';

angular.module('some.someModule', ['bm.component.templates'])
.directive('somesomeModule', somesomeModule);

somesomeModule.$inject = [];
function somesomeModule() {
return {
restrict:'EA',
templateUrl : 'components/document_preview/document-preview1.html'
};
}
})(window.angular);


I have an app.js where I inject this new component to app module.

var someApp = angular.module('some.app', [
'bm.component.templates',
'some.hello',
'some.someModule',
])
.config(config)
.run(run);


I get this from the console:

enter image description here
The strange thing is I also have an some.hello angular component with the same sort of code and it is working fine. How to fix this? Any help would be greatly appreciated.

Answer

You are not declaring your custom module as a dependency of your application module.

Please try the following :

 var someApp = angular.module('some.app', [
    'bm.component.templates',
    'some.hello',
    'some.documentPreview',
    'some.someModule'
])
.config(config)
.run(run);

EDIT #1:

Try wrapping your angular module code in an IFFE as you did with your custom one :

(function (angular) {
    var someApp = angular.module('some.app', [
            'bm.component.templates',
            'some.hello',
            'some.documentPreview',
            'some.someModule'
        ])
        .config(config)
        .run(run);
})(window.angular);

EDIT #2: Here's your code working.

Comments