angular2 Error : this.$modal.modal is not a function

Question

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.

Answer 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

Answer 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 :)