Issue with ui.bootstrap or AngularStrap while loading files with object syntax

[sylouuu]

Hi,

Sorry for the title, but I have a big problem here.

Everywhere I use something like this:

'/contact/create': {
    templateUrl: 'app/modules/contact/views/form.html',
    controller: 'CreateFormController',
    page: {
        title: 'Create a contact',
        name: 'contact_create',
        require_auth: true
    },
    resolve: {
        lazy: ['$ocLazyLoad', function ($ocLazyLoad) {
            return $ocLazyLoad.load([{
                name: 'CRM.Contact',
                files: [
                    'app/modules/contact/controllers/create_form.controller.js'
                ]
            }, {
                name: 'CRM',
                files: [
                    'app/services/contact.service.js',
                    'app/services/contact_position.service.js',
                    'app/services/contact_status.service.js',
                    'app/services/company.service.js'
                ]
            }]);
        }]
    }
},

But when I have to use a directive in ui.bootstrap or AngularStrap the directive code is runned twice.

For example, when I try to use ui.bootstrap tooltip or typeahead directive, I always got this error:

Multiple directives [tooltipPopup, tooltipPopup] asking for template on:

when I try to use AngularStrap typeahead directive, I always got this: mgcrea/angular-strap#1149 or even mgcrea/angular-strap#1122

It took many hours to find that the problem was with your loader. If I remove the object syntax, it works. Example, this still throws an error:

return $ocLazyLoad.load([{
    name: 'CRM.Contact',
    files: [
        'app/modules/contact/controllers/create_form.controller.js'
    ]
}, {
    name: 'CRM',
    files: [
    ]
}]);

It's OK:

return $ocLazyLoad.load({
    name: 'CRM.Contact',
    files: [
        'app/modules/contact/controllers/create_form.controller.js'
    ]
});

But I can't load my other files... I have to find a quick solution. If I have no better option today, I won't use the object load syntax and I will load all services in my index.html...

Any help appreciated. ;)

Bests

[ocombe]

Do you load ui bootstrap & angularstrap with your app at the beginning and they are then defined as dependencies in the loaded modules ?
If so, could you try to defined them as already loded already loaded with loadedModules (option of the configuration), and let me know if this solves your problem ?

[sylouuu]

It's loaded in index.html and added to main module as dependency.

I don't understand what should I do with loadedModules?

[ocombe]

In the config of your application, you can config the ocLazyLoadProvider like this:

$ocLazyLoadProvider.config({
    loadedModules: ['ui.bootstrap', 'mgcrea.ngStrap']
});

[sylouuu]

Ok, not really, same issue.

[ocombe]

Damn that was my best bet :)
Any chance to get access to a plunkr or a live copy of your app to debug the sources ?

[sylouuu]

Can't reproduce the issue in a plunkr. I've lost so much time. I don't use the object notation and it works now.

Thank you.

[ocombe]

hmm ok, I'll keep this open because there might be a bug here that I'll need to investigate, thanks for the follow up !

[robertdunaway]

This solved it for me. I added a config that told ocLazyLoadProvider what modules I already had loaded.

var mashupApp = angular.module('mashupApp', ['ngRoute', 'ui.bootstrap', 'ngSanitize', 'oc.lazyLoad']);
// -------------------------------------------------------------------------

angular.module('mashupApp').config(['$ocLazyLoadProvider', function ($ocLazyLoadProvider) {

$ocLazyLoadProvider.config({
    loadedModules: ['ngRoute', 'ui.bootstrap', 'ngSanitize', 'oc.lazyLoad']
});

}]);

[ocombe]

Fixed in 0.3.9 !

[robertdunaway]

Does this mean I no longer need to do what I suggested above where I tell ocLazyLoad what I have loaded?

[ocombe]

Yes, it should work without it (unless you use angular.bootstrap, in which case it is still necessary).