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

admin管理员组

文章数量:1389805

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 binations. 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!

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 binations. 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!

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

Share Improve this question Follow asked Apr 14, 2014 at 19:39 hzanehzane 73711 gold badge88 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptLoading angular uibootstrap with requirejs fails unless i rename uibootstrapStack Overflow