Possible solution for error - Bootstrap modal: is not a function

Run

npm i @types/jquery
npm install -D @types/bootstrap

in the project to add the jquery types

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

and import this too

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Comments

[markfilan]

The $(…).modal is not a function is usually caused because scripts are loaded in the wrong order . The browser will execute the scripts in the order it finds them. If in a script you attempt to access an element that hasn't been reached yet then you will get modal is not a function error. Make sure that you don't have a script above one that it requires. For example, bootstrap depends on jQuery , so jQuery must be referenced first. So, you must called the jquery.min.js and then bootstrap.min.js like the following:

<script src="/jquery-x.x.x.min.js"></script>
<script src="/bootstrap.min.js"></script>

Multiple jQuery instances

Sometimes this warning may also be shown if jQuery is declared more than once in your code. The second jQuery declaration prevents bootstrap.js from working correctly.