I'm just getting into Angular as well as Bootstrap. I build an Angular project, then added bootstrap to it after the fact (npm install bootstrap) and then tried various bootstrap-features on one of the html-pages. Some of them work, some don't.

The code in the answer to this question, for example: Dismissable alert . The alert is displayed, but when I click the X, it doesn't disappear. Strangely, if I access the exact same HTML-file directly in my browser, rather than via the served Angular-page, the feature works normally.

So where did I install something wrong? Here are some attempts I made, based on various hints off the internet: Here's the relevant part of my angular.json:

    "styles": [
    "node_modules/jquery/dist/jquery.js",
    //"node_modules/tether/dist/js/popper.js",
    "src/styles.scss",
    {
        "input": "./node_modules/bootstrap/dist/css/bootstrap.css"
    }
    ],

My styles.css contains:

    @import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');
    @import "~bootstrap/dist/css/bootstrap.css";

1 Answers

1
zmag On Best Solutions
  1. Import JavaScript files in the scripts property, not in the styles property.
...
"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
  1. Don't import a CSS file twice.
@import "~bootstrap/dist/css/bootstrap.css";