Loading angular ui-bootstrap with require.js fails unless i rename ui.bootstrap?

Question

Summary of code:

main.js:

    require.config({
        paths: {
            'uiBootstrap': '../lib/bootstrap/angular-bootstrap/ui-bootstrap-tpls.min'
        },
        shim: {***},
        priority: ['angular'],
        deps: [
            './bootstrap'
        ]
            });

---

bootstrap.js:

    define([
        'require',
        'angular',
        ...
    ], function (require, ng) {
        'use strict';
        require([
                'domReady!',
                'uiBootstrap'
                ], function (document) {
                    ng.bootstrap(document, ['app']);...

---

app.js:

    define([
        'angular',
         ...
    ], function (ng) {
        'use strict';

        return ng.module('app', [
            ...
            'uiBootstrap'
        ]);
    });

I was getting a range of differing errors while trying different combinations. Until I went into ui-bootstrap-tpls.min.js and actually Replaced All ui.bootstrap to uiBootstrap and modifed the module name reference as seen above. And presto - ui-bootstrap is working fine.

Obviously this is a less than optimal solution.

Can anyone please provide insight why this is occurring and what the better approach to resolve it is, so I don't go public using this source modified ui-bootstrap?

Thank You!

Answer 1

In your app.js when giving the dependencies to angular you should give it as 'ui.bootstrap'(this is the correct module name) and not your custom name which you defined in main.js.

So your app.js would look like:

define([
    'angular',
    'uiBootstrap',
     ...
], function (ng) {
    'use strict';

    return ng.module('app', [
        ...
        'ui.bootstrap'
    ]);
});