this.$modal.modal is not a function

[razzu]

Hello! I've been developing a feature for a project using ng2-bs3-modal, and when getting ready to merge to master I've run into this error when trying to open modals:

TypeError: this.$modal.modal is not a function at ModalInstance.show (modal-instance.js:37) at ModalInstance.open (modal-instance.js:15) at ModalComponent.open

I've looked at some other similar issues but haven't been able to fix this yet. I'm not sure if it's directly related to this module or something else, but it would be great if someone could be able to give me a nudge in the right direction.

Here are the contents of package.json:

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/router": "3.4.8",
    "angular-2-dropdown-multiselect": "0.4.1",
    "angular2-jwt": "0.1.28",
    "angular2-modal": "2.0.3",
    "angular2-notifications": "0.4.53",
    "calendar-utils": "0.0.39",
    "core-js": "2.4.1",
    "date-fns": "1.27.2",
    "es6-shim": "0.35.3",
    "font-awesome": "4.7.0",
    "jquery": "3.1.1",
    "ng2-accordion": "0.0.15",
    "ng2-auto-complete": "0.8.0",
    "ng2-bootstrap": "1.3.3",
    "ng2-breadcrumb": "^0.5.6",
    "ng2-datetime-picker": "0.14.2",
    "ng2-bs3-modal": "0.10.4",
    "ng2-pdf-viewer": "1.0.2",
    "ngx-accordion": "0.0.17",
    "paypal-rest-sdk": "1.7.1",
    "rxjs": "5.2.0",
    "webrtc-adapter": "3.1.6",
    "zone.js": "0.7.7"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0-rc.0",
    "@types/jasmine": "2.5.43",
    "@types/jquery": "2.0.40",
    "codelyzer": "2.0.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.5.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-remap-istanbul": "0.6.0",
    "protractor": "5.1.1",
    "raw-loader": "0.5.1",
    "sass-loader": "6.0.2",
    "ts-node": "2.1.0",
    "tslint": "4.4.2",
    "typescript": "2.2.1"
  }
}

And here is part of the index.html file:

...
<script src="/static/jquery.3.1.1.min.js"></script>
  <script src="/static/algebrite.bundle-for-browser.js"></script>

  <link rel="stylesheet" href="/static/katex/katex.min.css">
  <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
  <script src="/static/katex/katex.min.js"></script>
  <link rel="stylesheet" href="/static/chosen-js/chosen.css">
  <script src="/static/chosen-js/chosen.jquery.js"></script>
  <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
...

Thanks in advance, and sorry if this is not the right place for this issue or if relevant information is missing!

[dougludlow]

This typically occurs if the bootstrap javascript is missing or hasn't been loaded before your modal code. Your html snippet above, is it from the head? Are you seeing any http errors in your dev tools (404, etc)?

[razzu]

All of this was from the head, yes.

I've done some more experimenting with the order of various scripts after I read your answer, and it appears that the problem was from some external libraries (related to an odoo module, im_livechat, that we're trying to interface with).

Apparently, having these two lines:

<script type="text/javascript" src="/static/im_livechat/external_lib.js"></script>
  <script type="text/javascript" src="/static/im_livechat/loader/3"></script>

after loading the bootstrap javascript was what was causing the problems. I've bumped them above my line that loads bootstrap.min.js and now it seems to be working.

So, all in all, I guess I should have just tried a bit harder, as this doesn't seem to be really related to ng2-bs3-modal. Sorry for the unnecessary posts and thank you for your time!

[dougludlow]

No problem, glad I could be of some help!

[Ankita-Jaiswal]

Better solution will be

Install jquery and bootstrap in your project

npm install jquery npm install bootstrap

then import both in the file (for eg model-view.component.ts) where you are using this modal import 'jquery'; import 'bootstrap';

For me this worked flawlessly :)

[halfdan87]

Ankita-Jaiswal - thanks, it helped me a lot!

[Anishu9]

@Ankita-Jaiswal I am facing same issue. I have included both jquery and bootstrap in my angular project but still it is not working.