I'm writing a simple extension for Apache Guacamole following the guidance in the manual. I can get most theme elements working correctly except adding custom javascript. According to the manual I should be able to include my javascript file by specifying a relative path to the file in my extension guac-manifest.json file like this:
{
"guacamoleVersion" : "0.9.12-incubating",
"name" : "stuff",
"namespace" : "stuff-menu-extension",
"translations" : [
"translations/en.json"
],
"js": ["myscript.js"],
"html" : [ "resources/templates/new_template.html" ]
}
Here's a screenshot of the reference in the manual
Except when I include any js file it appears that app.js doesn't bundle correctly and give this error and the site does not display at all:
At first I thought it was my js code in the myscript.js file, but to test I removed everything from the file except a comment line
//test
But I get the same error. Is this just a bug or am I messing this up? I then tried it with an empty file, but got the same error. After digging through the code it looks like Guacamole takes all the javascript files specified in an extensions manifest and tries to bundle them into the main app.js file, and I guess this is where I'm messing things up.
Has anyone experienced this? Any idea on the proper way to include custom javascript in a guacamole extension? Ideally, I'd like to eventually include angularjs code to add functionality.
I had the same issue and the error was actually in my pom.xml file. I have copied some existing pom.xml which contained angular-maven-plugin. This plugin requires generated and template directories within the project, which I didn't have (and didn't need in my case). The building of the project was fine, but the plugin produced the same error as yours when loaded into page. Removing angular-maven-plugin solved the issue.
I believe your observation is right, this issue can be caused by packaging. You may also check if the final generated .js file has the same name in pom.xml and in guac-manifest.json.
Related
I am running a MEAN stack environment, and ran into an issue when trying to include a third party addon to angularjs material.
We have a PUG template acting as our main view, and are declaring all dependencies there. In it, I have this line:
script(type="text/javascript" src="scripts/ng-material-datetimepicker/dist/angular-material-datetimepicker.min.js")
script(type="text/javascript" src="scripts/ng-material-datetimepicker/dist/angular-material-datetimepicker.min.js.map")
link(rel="stylesheet" href="scripts/ng-material-datetimepicker/dist/material-datetimepicker.min.css")
the scripts portion of the src is set to our node-modules folder using this line:
app.use('/scripts', express.static(path.join(__dirname, ".\\node_modules")));
With that setup, I am getting the following error in the dev console, in reference to the .map.js file only (everything else seems to work):
Uncaught SyntaxError: Unexpected token :
I have seen some answers regarding the MIME type being incorrect, or this being an issue with chrome, but I'm starting to lean towards something of mine being set up incorrectly. What am I doing wrong?
With the help of the author, i have this figured out. In this specific case, the .js.map file was not needed. Also changed the below lines a bit (removed the type attribute for the js file, and used non-minified versions):
script(src="scripts/ng-material-datetimepicker/js/angular-material-datetimepicker.js")
link(rel="stylesheet" type="text/css" href="scripts/ng-material-datetimepicker/css/material-datetimepicker.css")
Here is a link to the github exchange with the author. Hopefully this answer helps a random browser in the future :)
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 have a webpack project (based on https://github.com/vuejs/vue-webpack-example) which generates an index.html file and a javascript file containing the application.
Everything works fine when I include the JavaScript like this:
<script src="static/js/app.js"></script>
When I try to include the contents of static/js/app.js directly in a script tag (because we need to end up with a single .html file) it doesn't work anymore. It looks like the javascript doesn't get exectuted at all:
<script>!function(e){function t(i){if(n[i])return...</script>
I extracted the application into 3 files (manifest.js, vendor.js and app.js) where vendor.js contains the libraries I need from node_modules. It works as long as I don't include vendor.js directly. So I can inline the manifest.js and app.js but not vendor.js.
Any ideas why the inlined js doesn't work but the included js via an url does work? Until now I thought js would behave exactly the same, no matter how it's included.
I figured out what's wrong.
Some browsers (I tested Safari and Chrome on Mac) seem to not like <script> tags which have an opening script tag somewhere inside them. Even though all the closing script tags are escaped (like document.write("</script"+">"))
Strangely this does work in simple example like this one:
<script>
document.write("<script>alert(1)</script"+">")
</script>
In complex examples (like this one: https://gist.github.com/Sopamo/f2a591b4afaa91238516b82006e85845)
it only works when all <script> tags are "escaped". Maybe someone can find out what's the difference between the simple and the complex example.
In my case I used the inline example of the html-webpack-plugin which I modified as follows:
script(type="text/javascript") !{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source().replace(/<script>/g,'<script"+">')}
Note the replace() call at the end.
You shouldn't need to include the app.js file. If you run npm run build from project folder it will create all files needed to run the application inside the dist folder.
Remember also that the app must be served from an HTTP server in order to work.
I have a website built on the MEAN.io stack and am trying to generate PDF files on the client side with pdfmake. One can install pdfmake with bower (it looks like they used browserify to generate the client-side version).
I am struggling to get it to work. Either the injection of pdfmake does not work (I assume it cannot be found) or the pdfmake object is undefined (if I don't add pdfmake as a dependancy). I assume pdfmake needs to be packaged in some way to make it accessible, but I don't know how.
In config/assets.json I added:
"bower_components/pdfmake/build/pdfmake.js"
In the HTML corresponding to the JS file in which I want to use pdfmake I added:
<script src="bower_components/pdfmake/build/pdfmake.js"></script>
<script src="bower_components/pdfmake/build/vfs_fonts.js"></script>
I have set up a basic version on Github. I would really appreciate it if someone could explain to me how to make it possible to make pdfmake available for use in packages/system/public/controllers/index.js, for example.
I was recently have a similar problem. It seems to come from the fact that pdfmake isn't yet "browserfiable." After much troubleshooting, I was able to get it working through simply including the two client-side scripts pdfmake.min.js and vfs_fonts.js via script tags in my build directory. That's it.
Try moving the two script tags out of the bower_components directory and into your build directory. Make sure they're before your bundle.js, or generally whatever scripts need pdfmake.
I don't fully understand how bundled scripts are able to see the global objects created by these two files, but I think it's because they're setting pdfMake to the window object:
(The vfs_fonts.js file starts like this:)
window.pdfMake = window.pdfMake || {}; window.pdfMake.vfs
Since Browserify sets the global object to window, this approach seems to work. (Though I don't fully understand why... see this Github issue on their repo for more explanation and the deglobalify npm package.)
Here's another relevant post I was able to find.
Why using jquery.min.map if:
jquery = 242 ko
jquery.min + jquery.min.map = 83 + 125 = 208 ko (the map is even greater than the library)
And if we remove the comments, we will get a small jquery that could be easier to read (and to debug).
So, why using the map if it will only add more than 100 ko and an extra request?
What is the best practice?
Source maps are loaded only when the developer tools are active. Browsers won't load them for application's users.
Edit: It should be mentioned that there are 2 types of source maps. One which is an external file and there is a link to it in the actual file and another one which is embedded in the main file. Browsers actually have to load the entire file (i.e. including the embedded source map) for the second type.
Check https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ for more information.
That's called a source map. This answer goes into detail about what they are, how they work, and why you would want to use it.
EDIT
Extracted answer from the above SO link for posterity. Answered by #aaronfrost
The .map files are for js and css files that have been minified. They are called SourceMaps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the sourcemap will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the sourcemap, then any error would seem cryptic at best.
Same for CSS files. Once you take a SASS or LESS file and compile it to CSS, it looks nothing like it's original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.
What is it for?
To de-reference uglified code
How can a developer use it?
You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
Should I care about creating a js.map file?
If you care about being able to debug production code easier, then yes, you should do it.
How does it get created?
It is created at build time. There are build tools that can build your .map file for you as it does other files. https://github.com/gruntjs/grunt-contrib-uglify/issues/71