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.
Related
I am using Bootstrap, but would like to reduce the size of the Javascript.
I only need dropdown/collapse and sometimes carousel, so I want to include only those.
There is a folder "dist" with every single script individually.
I tried including them via -SCRIPT- tag. It does not work at all and produces lots of errors in the console.
Do I need specific other script files too, or is the JS in the dist-folder just not suitable for that?
Please forgive me, I have very little knowledge about JS and english is not my first language.
Simply put, how do I include only the needed JS into Bootstrap5?
I am on Windows and do NOT have NPM or any other bundler/packager/installer.
I am surprised, there is no dedicated website for configuring the JS.
I googled a lot but did not find anything related to my question.
First call basic utilities then call individual components [bootstrap 5.2.3]
My first observation is that you may be heading down the premature optimisation path. The difference between the minimal bootstrap build, and the individual components isn't huge. And on top of this, the main advantage of using a CDN is that the browser will likely have already loaded and cached it (from use in another site: it's a common resource) so trying to do anything non-standard will increase load-times, not reduce them.
But if you're set on using the individual components, they are available on the CDN too, as described on the bootstrap site.
Make sure to use the integrity and crossorigin attributes to protect your site from leaking information to the CDN, and also being attacked via the CDN. If you're new to this, have a read of this page on subresource integrity.
Use Bootstrap Cdn
You can simply use this link
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
Now u dont need to include from folder
I am new to Angular(6) and I want to know where to add page specific script in angular 6, which I have placed earlier in .cshtml file?
I have found many ways to include external JS file in Angular, but I want to add a small piece of javascript code (mentioned below) into page (or component) and of course I do not want to create a separate JS file for this small script. I have already tried to put below mentioned script literally in .html file in a component but nothing happened. I checked source code also, script was not there. Help me to understand it. Thank you.
<script type="text/javascript">
toolTip();
</script>
From my point of view - the best way how to do this - is to locate your script in some common directory and include it into angular-cli config, if you use it:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"./src/common/toolTipScript.js"
],
And then use it in application wherever you need it
I am building an app in JQM that has multiple instances but the same core of scripts.
Summarizing, every instance will have its own index.html initializing that particular instance with files both taken from the central repository (the common scripts/interface) and from the particular instance (files specific to that instance only).
Since I am adding more capabilities to the application, I need to constantly update the core of scripts with new addons (both 3rd party or custom scripts), but I don't want to go and update all the single instances with the new scripts I'm adding.
My question is: is there a method to include a <script> tag inside the index.html of every instance (say <script src="commonurl/commonscripts.js"></script>) and on my common repository, in the commonscript.js use structures like the java import, to import all the scripts I'm using?
I know it's not how js works, but the core of the question is: do you have any suggestion on how to keep the client unvaried and work just on the server side modifying just the included file, or anyway not having to manually modify the client index.html? Is js minification/merging my only option?
Same question applies to CSS files included in the client index.html.
Hope this makes sense, thanks for the answers!
You can do this with requirejs
RequireJS is a JavaScript file and module loader. It is optimized for
in-browser use, but it can be used in other JavaScript environments,
like Rhino and Node. Using a modular script loader like RequireJS will
improve the speed and quality of your code.
http://requirejs.org/docs/start.html
I'm trying to optimize a Symfony 1.4 project and one thing that I would like to do is to defer JavaScript loading. I'm using the use_javascript() function to include files from inside templates.
Does use_javascript() have an options parameter (...or any documentation whatsoever?)
Alternatively, is there an alternative method for adding a tag to the collection for include_javascripts()?
Thanks for any help!
you use use_javascript('scriptname') to specify a javascript file to load - this doesn't add the JS file to the page it just allows symfony to build a list of files to include .. then to include the files you use include_javascripts() so to be "efficient" just place the include_javascripts() at the bottom of the page ...
As suggested here (jQuery example)-> http://www.symfony-project.org/jobeet/1_4/Doctrine/en/18
I am using append_to_slot('javascript') inside template. With require.js implemented
Once development is finished and I want to deploy code for end users, require.js optimizer can combine the JavaScript files together and minify it for me.
I end up with single .js file included to the page.
This question already has answers here:
Including a .js file within a .js file [duplicate]
(5 answers)
Closed 3 years ago.
How can I include a js file into another js file , so as to stick to the DRY principle and avoid duplication of code.
You can only include a script file in an HTML page, not in another script file. That said, you can write JavaScript which loads your "included" script into the same page:
var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);
There's a good chance your code depends on your "included" script, however, in which case it may fail because the browser will load the "imported" script asynchronously. Your best bet will be to simply use a third-party library like jQuery or YUI, which solves this problem for you.
// jQuery
$.getScript('/path/to/imported/script.js', function()
{
// script is now loaded and executed.
// put your dependent JS here.
});
I disagree with the document.write technique (see suggestion of Vahan Margaryan). I like document.getElementsByTagName('head')[0].appendChild(...) (see suggestion of Matt Ball), but there is one important issue: the script execution order.
Recently, I have spent a lot of time reproducing one similar issue, and even the well-known jQuery plugin uses the same technique (see src here) to load the files, but others have also reported the issue. Imagine you have JavaScript library which consists of many scripts, and one loader.js loads all the parts. Some parts are dependent on one another. Imagine you include another main.js script per <script> which uses the objects from loader.js immediately after the loader.js. The issue was that sometimes main.js is executed before all the scripts are loaded by loader.js. The usage of $(document).ready(function () {/*code here*/}); inside of main.js script does not help. The usage of cascading onload event handler in the loader.js will make the script loading sequential instead of parallel, and will make it difficult to use main.js script, which should just be an include somewhere after loader.js.
By reproducing the issue in my environment, I can see that **the order of execution of the scripts in Internet Explorer 8 can differ in the inclusion of the JavaScript*. It is a very difficult issue if you need include scripts that are dependent on one another. The issue is described in Loading Javascript files in parallel, and the suggested workaround is to use document.writeln:
document.writeln("<script type='text/javascript' src='Script1.js'></script>");
document.writeln("<script type='text/javascript' src='Script2.js'></script>");
So in the case of "the scripts are downloaded in parallel but executed in the order they're written to the page", after changing from document.getElementsByTagName('head')[0].appendChild(...) technique to document.writeln, I had not seen the issue anymore.
So I recommend that you use document.writeln.
UPDATED: If somebody is interested, they can try to load (and reload) the page in Internet Explorer (the page uses the document.getElementsByTagName('head')[0].appendChild(...) technique), and then compare with the fixed version used document.writeln. (The code of the page is relatively dirty and is not from me, but it can be used to reproduce the issue).
You need to write a document.write object:
document.write('<script type="text/javascript" src="file.js" ></script>');
and place it in your main javascript file
It is not possible directly. You may as well write some preprocessor which can handle that.
If I understand it correctly then below are the things that can be helpful to achieve that:
Use a pre-processor which will run through your JS files for example looking for patterns like "#import somefile.js" and replace them with the content of the actual file. Nicholas Zakas(Yahoo) wrote one such library in Java which you can use (http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/)
If you are using Ruby on Rails then you can give Jammit asset packaging a try, it uses assets.yml configuration file where you can define your packages which can contain multiple files and then refer them in your actual webpage by the package name.
Try using a module loader like RequireJS or a script loader like LabJs with the ability to control the loading sequence as well as taking advantage of parallel downloading.
JavaScript currently does not provide a "native" way of including a JavaScript file into another like CSS ( #import ), but all the above mentioned tools/ways can be helpful to achieve the DRY principle you mentioned. I can understand that it may not feel intuitive if you are from a Server-side background but this is the way things are. For front-end developers this problem is typically a "deployment and packaging issue".
Hope it helps.