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
You should include this:
After your other dependencies. I strongly advice you to consider using a dynamic module loader such as systemJS or (my favorite) webpack
Install jquery and bootstrap in your project
then import both in the file (for eg model-view.component.ts) where you are using this modal
For me this worked flawlessly 🙂