How do modules in ocLazyLoad loaded, parallel or in sequence?

Question

I'm using ocLazyLoad library to achieve lazy loading for all dependencies in my project. I know that by default files are loaded in parallel and to make it loaded in sequence I should use serie:true https://github.com/ocombe/ocLazyLoad/issues/47

From this thread I understand that I can load modules in series:

Yes the files are loaded in parallel, if you want to multiple modules at the same time and that they require one another you either need to define them in different object params:

$ocLazyLoad.load([{
    name: 'TestModule',
    files: ['testModule.js', 'testModuleCtrl.js', 'testModuleService.js']
},{
    name: 'AnotherModule',
    files: ['anotherModule.js']
}]);

Now I try to load all dependencies required for FullCalendar in my application, there's my ocLazyLoad config file:

$ocLazyLoadProvider.config({
         debug: true,
         modules: [{
                name: 'ngCkeditor',
                files: [
                            'resources/bower_components/ng-ckeditor/libs/ckeditor/ckeditor.js',
                            'resources/bower_components/ng-ckeditor/ng-ckeditor.min.js',
                            'resources/bower_components/ng-ckeditor/ng-ckeditor.css'
                        ],
                serie: true
         },{
                name: 'ui.calendar',
                files: [
                        'resources/bower_components/fullcalendar/dist/fullcalendar.min.js',
                        'resources/bower_components/fullcalendar/dist/lang/he.js',
                        'resources/bower_components/fullcalendar/dist/gcal.js',
                        'resources/bower_components/angular-ui-calendar/src/calendar.js',
                        'resources/bower_components/fullcalendar/dist/fullcalendar.min.css'
                        ],
                serie: true
         },{
                name: 'ngFileUpload',
                files: [
                            'resources/bower_components/ng-file-upload/ng-file-upload.min.js'
                        ]
         },{
                name: 'momentjs',
                files: [
                            'resources/bower_components/moment/min/moment.min.js'
                        ]
         }]
    });

And this is part of my router:

.state('schedule',{
            url: '/schedule',
            controller:     'ScheduleController',
            templateUrl:    'schedule.html',
            resolve: {
                  loginRequired: loginRequired,
                  loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
                      // you can lazy load files for an existing module
                             return $ocLazyLoad.load(['momentjs','ui.calendar','ngCkeditor']);
                   }]
            }
        })

Despite that module 'momentjs' defined at first place I still get an error: Uncaught ReferenceError: moment is not defined

If I put moment.js in 'ui.calendar' module it works, but I'd like to load it separately because I have another views in my application where I use only moment.js and doesn't need all dependencies.

So, my question is, how to make moduls (not files) to be loaded in a serie, not files or if they already loaded in a serie, what can cause to my mistake?

Thank you in advance.

Abert

Answer 1

You can use amers answer when you want to load modules one after another in each separate state. Put:

$ocLazyLoad.load(['momentjs','ui.calendar','ngCkeditor'], 
    {serie: true}).then(function() {
     // done..
});

If you want always to load modules in a serie you can set globally parameter serie:

$ocLazyLoadProvider.config({
    serie: true,
    modules: [{
        ...
    }]

Walkin

Answer 2

Yes you can do it:

   $ocLazyLoad.load(['momentjs','ui.calendar','ngCkeditor'], {serie: true}).then(function() {
         // done..
    });

Quigley