将bootstrap-toggle添加到JHipster（Angular 2+）

Question

I would like to add a bootstrap add-on, namely Bootstrap Toggle to a JHipster Project. The project consists of a .css and .js file and requires jquery.

Simply adding this to index.html works fine but feels hacky.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

I would like to take advantage of yarn and webpack. I tried adding a vendor.css to the content folder which imports the toggle css file, but that didn't seem to do anything:

@import 'node_modules/boostrap-toggle/css/bootstrap-toggle.css';

How can I add Bootstrap Toggle (or similar libraries) from my node_modules folder to the application?

Answer 1

It is actually far simpler than both suggestions. All you need to do is mention the required resources in the vendor.ts . That includes javascript.

import '../content/scss/vendor.scss';
import '../content/css/vendor.css';
import 'path to js'

The vendor.css is similar to vendor.scss , but the import path is a bit different. Tilde denotes the node_modules folder, as far as I understand.

@import "~github-markdown-css/github-markdown.css";

And that is all. No meddling with .angular-cli.json or anything required.

Answer 2

In angular 2+, If you create project using @angular/cli , there is .angular-cli.json file.

In json file, within apps you can add styles and scripts you want to load from node_modules folder.

For example, in my project to add I have added font-awesome.scss , bootstrap.scss and scripts like jquery tether and bootstrap like this.

"apps": [
    {

      "styles": [
        "../node_modules/font-awesome/scss/font-awesome.scss",
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "styles.scss"
      ],

      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

  ],