For my project I need to install the "Loadingbar.js" lib to one of my pages (which you can find here: https://loading.io/progress/).
I did paste the CSS in my global "style.css" file.
So, first, I just tried to put the <script></script> in my index:
<script type="text/javascript" src="assets/js/loading-bar.js"></script>
It worked for few hours, and now it does not work anymore. So I tried everything: I tried to put the <script> everywhere on each line of my index.html or even in the html of my page, in the body, under the body, under the <app-root></app-root>... nothing worked.
Also, the Angular project is sometime trolling me: the js is loaded once very rarely. If I refresh the page without changing anything- it does not work anymore.
I tried to add "defer" to the <script></script>.
I tried to wait document ready, I tried the setTimeout, but it never worked.
I tried to add the path to the script in "angular.json", didn't work.
What can I do to make this work? How do I add JS lib to an angular project?
Thanks.
First thing you should know is that in angular applications it's better to use npm dependency of any library if possible. If this is not possible and you need to use external js files, you can follow these steps:
First, put your js inside the node_modules folder. eg: node_modules/test-lib/loading-bar.js
Inside your app.module.ts, you can put this line at top of the file:
import test-lib/loading-bar.js(without node_modules)
Loading.io links their library to their GitHub account.
They offer an Angular example here:
https://github.com/loadingio/angular-loading-bar
It looks like the best approach is to install the library via npm or yarn.
Related
In my public/index.html I need to load external .js file which will be used later during deployment.
Unfornately that file doesnt load when i npm start, nor when published in build. I dont get any error either. The file config.js is in public directory as well.
Added this to my index.html in tag:
<script type="text/javascript" scr="%PUBLIC_URL%/config.js"></script>
config.js looks like this:
alert(5);
var test=5;
I get no error in console, but it doesnt resolve at all. Nothing happens.
(i've tried playing with paths, googling around for hours but no luck. I guess there must be some security setting in react or something that prevents me from loading that script?)
ps: i am tring this which is not working for same reason for me: https://www.cotyhamilton.com/build-once-deploy-anywhere-for-react-applications/
It's not my longest answer. You need to fix the typo, the correct attribute is src not scr on your script tag. If you change it, it will work fine:
<script type="text/javascript" src="%PUBLIC_URL%/config.js"></script>
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 trying to import external JavaScript file (which uses jQuery) to my ionic 3 project.
To install jQuery, based on this answer, I ran:
npm install jquery --save
Then I can see that jQuery is working by executing some code inside $(document).ready from the first page of my app (it works).
Now I need to include reference to my external jQuery library, which I've done in src/index.html by:
<script src="assets/js/myLibrary.js"></script>
myLibrary.js uses jQuery by:
(function($, window, document) {
...
})(jQuery, window, document);
But unfortunately I get jQuery is not defined error from the library file.
I'm not sure if jQuery is not yet ready or something else, I tried adding defer attribute to the script import but with no luck.
Any ideas?
You could just do this in your html file. Please note that you can only do that when you have wifi.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I ended up putting jquery in src/assets/jquery.min.js, and then in index.html I added a script reference before the jQuery-dependent library I wanted to use:
<script src="assets/jquery.min.js" defer></script>
<script src="assets/js/myLibrary.js" defer></script
I'm not sure if that's the correct way to do this in ionic, and I'm not sure if that makes a duplicate import of jQuery [I already imported it via npm install jquery --save].
Anyway it works - FYI for anybody looking in this thread in the future.
I am bundling 6 different modules together in Webpack. One of then is Mustache.js.
The Mustache templates live inside the HTML page. They are not in a separate file. Now when I load my page ... I get this error ...
This is my app.js file
require('mustache');
require("./js/modules.js");
require("./js/custom.js");
require('owl.carousel');
require('bootstrap');
require("expose-loader?$!jquery");
I have tried changing the order, but nothing is working.
The 'modules.js' file has a dependency on 'mustache'. So I went into the modules.js file and added require('mustache'); at the top in that file, but nothing changed. Do I need to add any additional configuration to my webpack.config.js file ?
If I take the Mustache.js modules out of the bundle and load it normally on the html page like <script src="js/mustache.js"></script> then everything works fine.
Can someone please advise how can I include this module in the bundle ? Already wasted so many hours trying to make this work, but to no avail. Many thanks in advance.
It sounds like it's working when not bundled because you reference the script directly in the DOM and Mustache is added to the global scope, in this case window.Mustache.
In your app.js or any other 'bundled' script that is referencing Mustache you'll need to require and assign to a variable:
var Mustache = require('mustache');
I am trying to learn Derby.js and I am having a lot of trouble. I know I can include packages such as jQuery through npm and add it to the node_modules folder, but this isn't quite what I want to do. I want to be able to include these files like I do in normal HTML.
So I want to do something like <Head:> <script src="js/jquery.js"></script>. This does not work though because it cannot find the js directory. I expect this has something to do with the way node.js runs an app and that the app itself will not hold the js directory.
Any help would be appreciated!
Derby offers the Script: tag:
<Scripts:>
<script type="text/javascript" src="/components/jquery/jquery.js"></script>
The components directory is because of the usage of bower. Put the components directory into the public directory. According to the express FAQ, the static routes search below the given directory (which is public in derby's example application). Configure bower to put the files under public/components (Choose bower install directory).
The public directory is configured at lib/server/index.js: .use(gzippo.staticGzip(publicPath, {maxAge: ONE_YEAR})), where publicPath is configured above to path.join(root, 'public').
Be aware that the "idea behind the inline script is that it runs immediately, before any of the external scripts are loaded. This should only be used in rare cases where the script should run before the page is displayed in the browser, such as sizing something to the window or autofuocusing an element in browsers that don't support the "autofocus" attribute." Nate Smith in the derby google group.
Inline scripts should be placed in inline.js, located in the same directory as the application's index.js.
If you require jQuery to do something on the loaded page, following code snipped worked at my side (Firefox, Chrome) in inline.js:
window.onload = function() {
alert($(this));
}