Twitter Bootstrap Question posted in

angular2 Error : this.$modal.modal is not a function – Twitter bootstrap

I am getting error : this.$modal.modal is not a function

I got ng2-bs3-modal from Node_Module in wwwroot folder by gulp file.

My folder structure is:

 - wwwroot
  - angularlibs
     - angular
     - bootstrap
     - core-js
     - rxjs
     - zone.js
  - ng2-bs3-modal
  - appScripts (js generated from typescripts)
 - Scripts (typescripts)
 - typings
 - gulpfile
 - package.json
 - project.json
 - .....

If I move ng2-bs3-modal to Script (typescript) folder, it gives jasmin zone.js errors. With above structure I’m getting “this.$modal.modal is not a function” error because all typescripts from ng2-bs3-modal is not finding @angular/core.

script tags in index html in this order:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"    rel="stylesheet">

 <link rel="stylesheet" ref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>

I tried to solve by few options like:
https://github.com/dougludlow/ng2-bs3-modal/issues/52
https://github.com/dougludlow/ng2-bs3-modal/issues/34

But no luck. Am new to angular2. Quick help would be much appreciated.

Tags:

2

Answers


  1. 0

    You should include this: 

    <script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

    After your other dependencies. I strongly advice you to consider using a dynamic module loader such as systemJS or (my favorite) webpack

    Login or Signup to reply.
  2. 0

    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 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search