Hide from app.js main module a plug-in inside a component

Question

This one it might be an oldy but anyway I guess there are a lot of front-end developers with the wisdom.

I'm trying not to declare a plug-in into the main module of my application.

Let's say I have the following modularization:

SUB-COMPONENT MODULE

(function () {
'use strict';

         angular.module('app.modules.table.detail', []);

})();

COMPONENT MODULE

(function () {
'use strict';

         angular.module('app.modules.table', [
                  'app.modules.table.detail'
         ]);

})();

MAIN APP MODULE

(function() {
'use strict';

     angular.module('app.modules', 
        [ 'app.modules.table' <----// inside here is the table.detail 
         ,'app.modules.other.component'
        ]);


     angular.module('app', ['app.modules',

                             'smoothScroll'])

So, with this structure, can I hide the smoothScroll third-party away from the app module array? I just want to declare app.modules and that's it for the app.

I tried to include it as a dependency in the component array, but no luck. I've been reading about and I guess it has to be on the app for the $injector to know his $provider.

Anyone have nailed this?

`$injector` is for services, not modules. Have you considered lazy-loading? [ocLazyLoad](https://github.com/ocombe/ocLazyLoad) might be an option — Aleksey Solovey, Oct 26 '17 at 14:55
I can see that [ocLazyLoad](https://oclazyload.readme.io/docs) would be another module on the app. I was wondering if it is possible to do it without any adds-on. I mentioned `$injector` before because maybe, maybe, I can declare the `smoothScroll` as a service and inject its `$provider`. — Juan Garassino, Oct 26 '17 at 21:41
Then your question becomes quite philosophical. You can inject it [differently](https://stackoverflow.com/questions/37733304/how-can-i-inject-an-angularjs-module-dependency-without-declaring-it-in-the-depe), or you can hide it within [nested modules](https://stackoverflow.com/questions/39044175/nested-modules-in-angularjs) — Aleksey Solovey, Oct 27 '17 at 08:29
I guess yes, it is philosophical. And existencial, where does [all](https://stackoverflow.com/questions/26988989/add-dependency-to-angular-module-after-its-been-created) begins and ends. — Juan Garassino, Oct 27 '17 at 09:14

score 0 · Answer 1 · answered Oct 30 '17 at 10:20

I will answer myself because it was easier than I thougt.

I was not declaring the third-party in the sub-component / component modules.

CHILD module component

(function () {
'use strict';
angular.module('app.modules.table.detail', ['smoothScroll']); <-- HERE!
})();

PARENT module component

(function () {
'use strict';

angular.module('app.modules.table', ['app.modules.table.detail', 'smoothScroll' <--- ALSO HERE
]);
})();

So now I can bootstrap the app with no need of declaring the third-party on the main module. Therefore it is hidden from the main app module file