Property 'modal' does not exist on type 'JQuery<HTMLElement>'

[Ota Mares]

Hey,

i am trying to add bootstrap-loader to an already existing angular2 project of mine but i am unable to use the modal component feature in typescript component. When running the webpack watcher i get following error:

ERROR in [at-loader] ./src/app/_component_/_component_.component.ts:27:34
    TS2339: Property 'modal' does not exist on type 'JQuery<HTMLElement>'.

My webpack config includes following configuration:

entry: [
    __dirname + '/src/polyfills.ts',
    'bootstrap-loader',
    'font-awesome-sass-loader',
    __dirname + '/src/main.ts'
],

/* ... */

{
    test: /bootstrap\/dist\/js\/umd\//,
    loader: 'imports-loader?jQuery=jquery'
},

/* ... */
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        "window.Tether": 'tether',
        Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
        Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
        Button: "exports-loader?Button!bootstrap/js/dist/button",
        Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
        Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
        Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
        Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
        Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
        Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
        Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
        Util: "exports-loader?Util!bootstrap/js/dist/util"
    })
]

I am running out of clues what i am doing wrong. I re-read the "How to use Bootstrap 4 and Sass (and jQuery)" and the bootstrap-loader documentation itself a hundred times now and cant find anything i am missing.

I would be grateful about any help. Thank you.

[Ota Mares]

Okay got it fixed, the major grippe was that the project was still running tsd instead of typings. Also the project was running bootstrap3 not 4. Switching from typings and adding the jquery+bootstrap definitions fixed the issue. Therefor closing this.

Thanks :)

[Kalpesh Shingala]

Hey, I am using same bootstrap 4 tooltip. This same error is there and I am not able to solve it. Can you tell how did you fix that?

[Clarence Tunstall]

These jQuery solutions are not available to me. I am using bootstrap.vue and Typescript in core2 .net and VueJs environment, but I'm not using jQuery. Here's the code

         var el = document.getElementById('#myModal') as HTMLDivElement;
         el. modal('hide');