Reference error: import jQuery in bootstrap toggle while using typescript

Question

I am using typescript AMD module.

In my app.ts I got these imports:

import $ from 'jquery';
import 'popper.js';
import 'bootstrap';
//import 'bootstrap-toggle';

My code got jQuery, bootstrap and bootstrap-toggle functions. If I have commented out the bootstrap toggle library like the upper code shown my app works fine and don't show me errors.

But without my bootstrap-toggle library I can't use my functions of this library.

If I commend it in, I get the following error:

ReferenceError: jQuery is not defined (in bootstrap-toggle.js)

My bootstrap-toggle.js file is also using jQuery with this function:

function ($) {
...
}(jQuery);

I think, the problem is that I am including my jQuery only for my app.js and not in my bootstrap-toggle.js

But how I can define a import globally? I wont import jQuery on this way in my bootstrap-toggle.js file because it is a tool from here and not written by mine.

Thanks in advance.

Best Regards,

Sony

Answer 1

I found my solution. The typescript AMD module uses require JS, so it has to set up a require js config file like this:

requirejs.config({
    baseUrl: '',
    paths: { 
        app: 'app',
        jquery: 'jquery'
    },
    shim: {
        "bootstrap-toggle" : ["jquery"]
    }
});

If jQuery should be available for bootstrap toggle it requires the shim option in the require config.