We Keep Coding

Add external libraries in Angular 8

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

Add bootstrap-toggle to JHipster (Angular 2+)

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

How to configure SystemJS to be aware of an already loaded library like jquery?

I'm working on an admin panel built on top of AdminLTE template. The template depends on jquery, bootstrap and some other custom plugins that must be previously included using script tags in document head.
I'm using Jspm to manage libraries, some libraries like Toastr will require jQuery as a dependency, and will install and load another copy of jQuery.
I'm trying to figure out how to configure SystemJS in order to:
a) Tell SystemJS that I don't need install another copy of jQuery and
b) avoid duplicate loading of jQuery, since it's a global dependency that was previously loaded. How to achieve this?
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
...
<script src="system.js"></script>
<script>
System.config({
"map": {
"jquery": window.jQuery //???
}
});
</script>
<script>
System.import('main').
</script>

Looks like you want to use System.set
System.set( 'jQuery', System.newModule({'default': window.jQuery }) );
This assumes the global is expected to be the 'default'. You can also specify other exports as well by passing in more key / values to System.newModule.
If you can, it would be better to import your globals like other scripts because globals can have dependencies and systemjs can manage the load order for you through meta config setup

Include custom JavaScript in the app.js

I want to include a custom JavaScript in the app.js file which as the following code:
window.$ = window.jQuery = require('jquery')
require('bootstrap-sass');
The require only works for published packages and using node install but I want to know if there is a way to include a custom js in this file in order to have just one built script in my app (in this case the app.js script).

Add your scripts under this path \resources\assets\js\,
(ex : \resources\assets\js\scripts\my_script.js & \resources\assets\js\another_script.js)
And, add them to \resources\assets\js\app.js
require ('./scripts/my_script.js');
require ('./another_script.js');

Just add your script in resources/assets/js and then run gulp to compile all your scripts into app.js
Check this for more info

I presume you have other files that are not exactly VueJs files and you want to build into a single script. In that case it is not good to put the script in that file. You can however place the files in your resources/assets/js folder and add some code to your gulpfile.js to build all your scripts into one file. Here is the code you might need to add.
mix.scripts([
'filename.js',
]);
By default, the build file will be placed in public/js/all.js.
You can customise that driectory by modifying the example above to something like this
mix.scripts([
'filename.js
], 'path/to/file.js');

How to avoid code duplication using Browserify

CommonJS noob here, I read about browserify and thought it was simpler than my existing RequireJS setup, so I went ahead and changed them. What I have found out is I am going to have code duplication in each bundle. Let me explain:
Lets say, I have page1.js and page2.js make use of jquery.js and jquery-ui.js
Now I have to create bundle1.js and bundle2.js and the content of jquery.js and jquery-ui.js is duplicated in each bundle.
I have tried separated into different files in browser by only bundling the jquery.js and jquery-ui.js such as:
<script src="lib_bundle.js">
<script src="page1.js">
Problem is that the require within page1.js will fail because it's not a commonjs bundle.

This situation is what external requires are for. I'm not familiar with the command line for browserify, but when using the JavaScript API, you can do the following. This will bundle common dependencies together. They can then be referenced as "externals" by your other bundles.
var browserify = require('browserify');
var externalDependencies = [
'jquery',
'jquery-ui'
];
// shared libraries bundle (i.e. jquery, jquery-ui)
var libsBundle = browserify({
// your options
// ...
require: externalDependencies
});
// main bundle (i.e. page1, page2)
var mainBundle = browserify({
// your options
// ...
});
mainBundle.external(externalDependencies);
libsBundle.bundle();
mainBundle.bundle();
Script tags:
<script src="libsBundle.js">
<script src="mainBundle.js">

you could also create a seperate bundle for jquery and jquery-ui with this command line:
browserify -r jquery -r jquery-ui > modules.js
add <script src="modules.js"></script> to html and add -x jquery -x jquery-ui to your two bundles.
browserify -x jquery -x jquery-ui page1.js > bundle1.js
browserify -x jquery -x jquery-ui page2.js > bundle2.js