skip to Main Content

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.

2

Answers


  1. 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. 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