Develop Reference

Adding external JS script with defer attribute to Angular 11 project

I would like to use an external JS library into my Angular 11 project created using the Angular-CLI.
From many answers (1, 2, 3), I see that one way to achieve this is by adding the path to the JS file into the scripts section of angular.json file, and add variable declarations in typings.d.ts file (I should create one if it does not exist).
However, I would like to be able to load it with a "defer" attribute, namely when the page has finished parsing, as in the documentation of this library it reads:
Don't forget the defer attribute. It reduces the loading time of your
page.
From the official Angular docs page on this section, there does not seem to be an option to add this attribute, and I don't understand when these external libraries are loaded. I was wondering if anyone can help me understanding this.

You can add anything you like into the index.html. Even a script with defer attribute.
Whether that is the best way to include the script into your project is up to you.

Rails Include Third Party Javascript Library File

I've got a Javascript library for AJAX file uploading that I need to include on only one page. Where is the best folder for this for file? app/assets/javascripts? vendor/assets/javascripts? lib/assets/javascripts? And then I need to be able to include it on only one page. Or should I just add it to application.js and have it included on every page (even know I'm only using it on one page?)
I figured for performance my best bet would be to put the minified JS file somewhere, and just include it with a javascript_include_tag on the page I need it, by using yield(:head) and content_for(:head)? Thank you.

Third party JavaScripts should go inside vendor/assets/javascripts directory, because app/assets/javscripts is for your application specific JavaScripts and lib/assets/javascripts is for your libraries code which is separate to your application or libraries that you have shared across different applications.
Please reference Asset Organization for further details.
As far as inclusion of javascripts in your application/page if you're using it only on a specific page then including the file with javascript_include_tag is the approach I would take as well.

In the folder vendor/assets/javascripts because is a folder for third party script

Best practice for JS files being loaded?

I'm faced with a dilemma. I started a project using Backbone.js and have many many JS files (views, models, controllers, templates, collections), but I didn't want to have to load them each using the script element in my HTML file.
My idea was to load one file (bootstrap.js) and within that, load all the required JavaScript files for my web app (minus 3rd party libraries, which will get loaded using <script> before bootstrap.js).
Would using the jquery getScript function work to load all the JS files from within bootstrap.js? What's best practice? I just don't want to have like 20-30 <script></script> lines in my HTML file when I don't need to - just trying to keep it nice and clean.

You should concatenate them all before deploying. You can also run YUI Compressor on them for speed and size optimizations.
But my favourite way is keep them separate during development, and 1 big file before deploying. Some server-side script will make this easy.

Way to link multiple javascript files without minifying or combing into one document?

Is there a way to link multiple javascript files without making them one file?
What I would like is to have one file (javascript or otherwise) which houses links to my other javascript files.
For example, the webpage has one file called allmyscirpts.js, and inside this file is a list of links to my actual individual, separataed javascript files.
Is this possible?
Tod

JS can't simply import more JS, but you could easily write a simple server-side script that concatenates your files together. If you can't/won't work on the server, scriptloader libraries are very plentiful out there these days. Check out require.js, lab.js, yepnope.js, etc. and see if one of them suits you well.

The only way I can think of is to load Javascript files through ajax. The YUI Loader you to not only load all your js files (and those from YUI) within javascript, but it also allows you to configure dependencies between your js files. So For instance, if widget1.js requires global.js, you can configure that dependency, then you can tell the loader to load "widget1" and the loader will also load global.js when it loads widget.js.
Unlike css, I do not believe there is built in syntax in javascript that automatically includes another javascript file. But there are javascript utilities out there that allow this.
For a simpler solution than the YUI Loader, check out the YUI get utility. For my projects I have setup the YUI loader, and as a result my HTML pages only have about 2 or 3 javascript files included, and the rest of what I need is loaded on demand by the Javacript controller for that page.

Why does dumping all JavaScript files into one giant file change their behavior?

I took a snapshot of the jquery.js file and jquery-ui files that I use and dumped them into a giant .js file with all of the other .js files that I use for my site.
When I do just this with no minfication/packing, the files stop working and I get "recursion too deep" errors on the file when I try to load it on my site instead of the usual .js files. All of the errors came from jquery and jquery-ui. Using a simple numbering scheme I made sure that the jquery.js/jquery-ui files were the first listed in the file and in the correct order (the same as includes as individual files.)
Two questions:
1) Doesn't the include tags for JavaScript have the same effect as dumping all of the files into one giant file? Is there extra isolation/insulation that JavaScript files get from being in their own script tags or in different files?
2) My goal is to make my site faster by having one huge .js file with all JavaScript I ever use in my site (which is heavy in JQuery) and minify that file. Why is this misguided? What is a better way to do it?
NOTE: Google's CDN version of the JQuery files don't work for me, all of the JQuery plugins/themes I use don't work with Google's versions (anyway who says that they can successfully use Google's CDN is lying.)
UPDATE: Thanks for the good advice in the answers, all of it helped me learn more about deploying JavaScript files on a production server. I am actually always using the latest SVN branch of the JQuery UI plugins and there were errors in the UI plugins that prevented them from being merged together with my files. I got the latest Theme Rolled plugins that are already minified in one file and that worked around the problem.

Probably your JavaScript files have some syntax errors. Browser can correct them when loading files one by one, but fail when "bad" files combined. You can try to compile your file using Rhino compiler (http://www.mozilla.org/rhino/)
java -cp build/js.jar org.mozilla.javascript.tools.jsc.Main giant.js
Also you can use JSLint validator (http://www.jslint.com/), thought likelly it will not be able to handle jQuery. But you still can combine all your files and validate them.

I'd recommend using a script manager such as this one to only register the files and plugins you need, and load them on the fly.
This keeps your requests to a minimum, and you don't have to load some huge 300k JS file one very page.

Another problem could be the load order changed. Most JavaScript files should be load order independent, but if you load jquery at the end after you have your:
$(document).ready(function() {});
you'll run into problems.