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');
Related
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.
I am working on a fully functional, existing Rails app. A friend of mine just built a few new front-end pages for me, but he just built them in html, with some JavaScript files.
Adding in the HTML has been easy, but I cannot figure out how to get the corresponding JavaScript files working.
I have imported all the JavaScript files into the app/assets/javascripts folders, and added them to the application.js file like this:
//= require modules/alerts
//= require modules/dropdown
etc.
But none of the JavaScript shows up - I threw some console.log lines in them just to test, but the lines never show. What else do I need to do to connect these JavaScript files?
Current structure:
app
assets
javascripts
modules
application.js (also inside javascripts folder like modules folder)
I am also getting this alert in console:
mobile-nav.source.js:23 Uncaught ReferenceError: alerts is not defined
at mobile-nav.source.js:23
But just checked the mobile-nav.js file and line 23 has nothing about alerts.
I think my error is coming from modules/init-modules.js - I am adding in alerts: alerts to the var Modules object, and when I do that, it seems to break all the other js. Is there something I need to do first before I can add to this file?
EDIT: Found the issue! Thanks for everyone that helped. There was a variable being declared incorrectly, but the way it was throwing the error made it hard to find.
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');
I'm using NG Boilerplate to create an angularJs application and I'm running into an issue where the JS file containing my login controller gets written to index.html before the loginModule.js file does and this is causing a bunch of errors.
Is there a way to control the order in which JS (and CSS) files get added to the compiled page?
Had this problem too.
The JS files are added alphabetically per module to your index.html. I solved this problem by defining submodules in files that start with an underscore (like _submodule.js) to ensure that it gets added to index.html before the other files that use this module.
More info here: https://github.com/ngbp/ngbp/issues/152
From this thread:
[...] I needed a solution for multi-file modules and came up with something that seems to be working. In a multi-file module folder, I create an _init.js which declares the module:
angular.module( 'ngBoilerplate.about', [
'ui.state',
'placeholders',
'ui.bootstrap'
])
;
And then my other .js files can do this:
angular.module('ngBoilerplate.about')
.controller ...
;
Alright, I've got a multi-page site with page-specific modules. Each page should load two JS files generated by r.js: main.js, which is a collection of all modules available globally, and "page-name-here".js, which is a collection of the modules only needed for the current page.
I tried to pattern it somewhat off of this response to a similar question: https://stackoverflow.com/a/11730147/843490.
I also wanted to structure it so that I wouldn't have to explicitly include jQuery as a dependency in every module, but that it would just be loaded and executed first.
Build.js file: http://pastebin.com/XP2cCh18
Main.js file: http://pastebin.com/vsAnm99S
The r.js tool seems to be compiling everything correctly with all modules written into main.js and "page-name-here".js. BUT, when I load the page, require js starts bringing in EVERY global module individually even after main.js has loaded. I assume this is due to global.js not being listed explicitly as a dependency, but I'm unsure of have to tweak it to remedy this.
Any clues? Thanks!