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?
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.
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"
],
],
Related
I'm using NX.dev with Angular projects and I have a few projects and libs.
Im having a few static CSS/SCSS files I want to share for all projects (Apps & libs)
First CSS file - I want to just bundle it in the projects, in order to do that I added it to the project JSON file per app like this.
"targets": {
"build": {
"styles": [
"libs/ui/src/lib/styles/style.bundle.css"
],
}
}
It's working great, But I'm not getting I'm getting the same effect for the libs (It's not working)...
Second SCSS file - this file is a global variable file, I want this file to be available on-demand in the lib SCSS files.
I want each file to be able to do this:
#import "variables";
Not sure how to achieve that.
Any idea how can I get these two files into my libs?
One file should add on compile and one on-demand.
Thanks in advance!
I want to use some external jQuery libraries in my Angular project.
I added these libraries inside index.html file, but they are not working. I also added my .js files in angular.json, but the problem still exists. I add libraries like this:
<!-- CUSTOM JS -->
<script src="assets/js/jquery.app.js"></script>
Actually the code in this js file is not reachable. It seems Angular does not understand it to go and run that specific function in this file.
I expect a menu item shows its sub menus but the jQuery code does not work in Angular.
As you use Angular, you probably also use the angular/cli.
In that case, just add your file in the angular.json file like :
"scripts": [
"../node_modules/jquery/dist/jquery.js"
],
This will let angular import your external lib in the end bundle.
You will find more informations in the official documentation :
https://github.com/angular/angular-cli/wiki/stories-global-scripts
I'm an inexperienced web dev, and especially so when it comes to JavaScript. Lately I've been trying to fix that, and since Laravel's my framework of choice I'm trying to change from the "old" style of:
<script src="script1.js"></script>
<script src="script2.js"></script>
…
to something better. And using Laravel, the logical step is using Mix, which relies on Webpack.
After a lot of trial and error, I've managed to get the basic setup working. I have a settings.js file for changing the modules' default settings when necessary, and an app.js file for custom functions I'd like to make available on every page. I'm also separating the vendor modules to a vendors.js file.
So the bootstrap.js file has:
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
[...]
require('bootstrap-datepicker');
require('bootstrap-year-calendar');
The webpack.mix.js file has:
mix.autoload({ jquery: ['$', 'jQuery', 'window.jQuery']});
mix.webpackConfig({ resolve: { alias: { jquery: "jquery/src/jquery" }}});
mix.js([
'resources/js/app.js',
'resources/js/settings.js'
], 'public/js')
.extract([
'lodash',
'jquery',
[…]
'bootstrap-datepicker',
'bootstrap-year-calendar'
]);
And the master layout has the following scripts right before `:
<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>
This setup seems to be working, but there's one last issue I just can't seem to figure out. I also add some javascript on specific pages, for functionality limited to those pages (initialising pickers with non-default settings, custom form behaviour, etc). So some pages have an extra <script type="text/javascript"> [custom code] </script> section before </body>.
However, code there doesn't have access to modules: $('.input-daterange').datepicker(); should initialise an input as a bootstrap-datepicker instance, but it doesn't. Of course, using the "old style" it worked. Now, I'm getting a TypeError: undefined is not a function (near '...$('.input-daterange').datepicker...') error.
So my issue is the following: how can I import the necessary modules to be used in the script embedded in the HTML file?
P.S.: when I was pretty much finished writing this question, I happened to stumble on the solution. I decided to post it nevertheless because a) it might help someone else, and b) if there's a better way to approach this, I'd love to hear about it.
Doing the import not on the embedded javascript, but on either my app.js or settings.js files, made it work:
import 'bootstrap-datepicker';
import 'bootstrap-year-calendar';
However, making the imports on settings.js rather than app.js seems to cause some issues, as it broke some separate functionality. I'm not sure if it's because app.js is listed first in the webpack.mix.js file (as shown below), but nevertheless the file where you make the imports does matter.
mix.js([
'resources/js/app.js',
'resources/js/settings.js'
], 'public/js')
According to this blog (which is written for BS3), I should add the following lines to the angular.cli.json file.
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
...
The problem is that in the distribution I'm using (BS4 Alpha 6), there's no such file. In the dist directory, there's a bunch of files as follows.
alert.js
button.js
carousel.js
collapse.js
dropdown.js
modal.js
popover.js
scrollspy.js
tab.js
tooltip.js
util.js
Do I have to link to them each individually? Am I missing a minified file somewhere? I'm in dist so I assumed that it's the production version.
Should I go about it in a totally different way, perhaps? I'm trying the Angular CLI package since I want to test without Gulp, Grunt nor Webpack. Is there an approach where I can include, reqest, demand or append those file (preferably minified) to my web site?
The styles I've included my simply importing what I needed from the dist like this.
#import "~bootstrap/dist/css/bootstrap.min.css";
However, I'm a bit confused on how to handle JS of the BS.
You're looking in the wrong place.
The files you are seeing are in js/dist/. You should be looking in dist/js/.
Is it possible to load a certain file before Angular 2 loads? At the moment I'm loading jQuery, bootstrap, file.js globally in angular-cli.json including it like this will bundle up when you start Angular.
Is it possible to load file.js first before Angular? I will also need to load jQuery for this file.js as it has some jQuery http requests. I tried moving ../node_modules/jQuery from angular-cli.json to my index.html.
Angular-cli.json - when file.js was in angular-cli.json
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"./assets/js/file.js"
],
index.html - when I moved jQuery and file.js in index I get jQuery not defined.
// in head tag
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="./assets/js/config/env.js"></script>
On top of .ts file where you want to use jQuery($), Import following :
import $ from 'jquery';
Now you can use $ for jquery related things.