如何在 Angular 4 应用程序中使用 Bootstrap 3 Modal？

Question

I tried every possible solution given here and I still have this error. I'm using Bootstrap 3 and Angular 4. It happens when I try to show a modal using this:

$("#myModal").modal('show');

Answer 1

It sounds like you haven't added the Bootstrap Javascript files to your Angular project in the correct way. What you should do is to add the files to your .angular-cli.json file.

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],

You can read more about it here .

Bonus Tips

Instead of mixing jQuery with Angular, I recommend you to install a library such as ngx-bootstrap that have rewritten the Bootstrap components as Angular components instead, it makes it way easier to work with together with the rest of your Angular code.

Resources:

• ngx-bootstrap Github page
• Blog Post of how to use Bootstrap with an Angular CLI Project .

Answer 2

Take a look @ this link . It has a working example and a question for the same with typings and without it. I have used bootstrap and jquery with Angular in that project, you can check the repo too.

In your case you need to add the jquery files

like this in your angular-cli.json

  "styles": [
    "../node_modules/bootstrap-v4-dev/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.min.js",
    "../node_modules/bootstrap-v4-dev/dist/js/bootstrap.min.js"

and then declare in component. declare var $: any;

This should work.

UPDATE

I went on to create a modal of bootstrap using just jquery in Angular using the steps i mentioned.

It works Check this gh page link - LINK .

and if you want to check the source code for the same check LINK .

The answer i posted came from this link this is my page on Angular LINK