Add bootstrap-toggle to 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?

Possible duplicate of this https://stackoverflow.com/q/45339209/2708210 — Rahul Singh, Aug 03 '17 at 19:39
My bad sorry. The answer of that question explains how to use third party css or js — Rahul Singh, Aug 03 '17 at 19:39

score 2 · Accepted Answer · answered Aug 04 '17 at 16:59

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.

score -1 · Answer 2 · answered Aug 03 '17 at 19:25

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"
      ],

  ],

Using Angular CLI might be an option, however JHipster projects do not contain a `.angular-cli.json` per default. I would rather do without that and work with what the template already offers. — hschne, Aug 03 '17 at 19:38

Add bootstrap-toggle to JHipster (Angular 2+)

2 Answers2