在延迟加载的模块中包含依赖项时，无法初始化ocLazyLoad错误

Question

I am trying to load modules progressively. I made a file 'lazyModule.js' and I load this module using oclazyLoad. When I define myModule.js dependency in this lazyModule.js, it throws following error on console:

No module found during bootstrap, unable to init ocLazyLoad. You should always use the ng-app directive or angular.boostrap when you use ocLazyLoad.

lazyModule.js

define([
    'angular',
    'components/infrastructure/myModule'
], function(angular) {
    'use strict';
    return angular.module('lazyModule',
        [
            'myModule'
        ]);
});

myModule.js

define([
    'angular',
    'ui-bootstrap',
    'ocLazyLoad'
], function initModule(angular) {
    'use strict';

    angular.module('html.myModule', [   'oc.lazyLoad']);
});

This is how i am lazy loading lazyModule.js:

initializeLazyModule: function(scope) {
                var template;
                try{
                    // checking for existing module
                    angular.module('lazyModule');
                    isLoaded=true;
                }catch(err) {
                    isLoaded=false;
                }
                if (!isLoaded) {
                    return require(['apps/controlCenter/lazyModule'], function() {
                        $ocLazyLoad.inject('lazyModule');
                        ControlCenterUtilities.checkAndApplyScope(scope);
                        $compile($('#my-module'))(scope);

                    });
   }

   else {
                   return;
   }
}

Although, when I remove the dependency for oc.lazyLoad module from myModule.js, the console error goes away.

But i do not have option to remove oc.lazyload module dependency from myModule, since it will break for some other component which is consuming my module directly without having loaded oclazyload already.

Its basically happening because oc.lazyload module is being injected twice. Please help

Answer 1

I have found solution to this.

oc.lazyLoad should not be included in the angular dependency of new angular module creation, if oc.lazyLoad is already loaded through bootstrap angular module. oc.lazyLoad tries to initialize itself whenever it is included in the new module dependency.

lazyModule.js

   define([
        'angular',
        'components/infrastructure/myModule'
    ], function(angular) {
        'use strict';
         var dependentModules = [
         try {
           angular.module('oc.lazyLoad');
         } catch (moduleError) {
             dependentModules.push('oc.lazyLoad');
         }
         return angular.module('lazyModule', dependentModules);
    });