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

angular-ui-bootstrap, angularjs, javascript, js-amd, requirejs

Solution

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'
    ]);
});

Problem

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!

Original source