How to install library 'When' in Javascript - javascript

I have got 2 files: index.html and index.js. I am using them to try and do autobahn communication. Autobahn works, but 'When' doesn't work.
I have used bower to download and install Autobahn, and then manually included autobahn.js from withing the html. I have done the same for When, but an error appears in the When library.
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing Autobahn</title>
</head>
<body>
<p> Fancy paragraph! </p>
<!--Bower-->
<script src="./bower_components/module/module.js"></script>
<script src="./bower_components/autobahn/autobahn/autobahn.min.js"></script>
<script src="./bower_components/when/when.js"></script>
<!--Node.js-->
<!--<script src="./node_modules/autobahn/lib/autobahn.js"></script>-->
<!--Browserify-->
<!--<script src="./bundle.js"></script>-->
<!--The actual main script file-->
<script type="text/javascript" src="index.js"></script>
</body>
</html>
When I open index.html in a web browser I get the following:

Found the answer. The deal was to install the libraries using npm. After that in the node-modules folder there are 2 folders containing the libs:
1) autobahn-browser
2) when
After including them like this it worked like a charm:

Related

Having trouble linking css and js with HTML file

I can't link my css and js files to my html file.
The most common problem I've seen with other peoples codes was that their files were not in the same folder but mine are and yet it is still not working.
<!DOCTYPE HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
If you are using the following:
<!DOCTYPE HTML>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript" src="app.js"></script>
</body>
I expect your folder structure to be as follows:
www/
index.html
app.js
style.css
Is that correct?
Your code seems OK but what is the exact issue you face? Both CSS and JS not loading?
FYI the files do not need to be in the same directory. Usually, they are separated into folders to keep things clean:
www/
index.html
js/app.js
css/style.css
Do you see any errors in your browser console? That could help you find the mistake
try this make the links as simple as possible e.g
and for js use the script tag within your Html and see if it working then you go for the linking

Setting location of Angular production JavaScript bundles in index.html

In Angular 6 app, I have a custom JavaScript file which I would like to load after minified bundles created by ng build --prod.
The desired output
<!doctype html>
<html lang="en">
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="runtime.06daa30a2963fa413676.js"></script>
<script src="polyfills.f6ae3e8b63939c618130.js"></script>
<script src="scripts.3093c8de343a90aee8a5.js"></script>
<script src="main.2f79061174841f85d990.js"></script>
<script src="customScript.js"></script>
</body>
</html>
The problem
By default, JavaScript bundles are added at the end of the <body> tag, which makes the customScript.js loads before them.
Is it possible to set in which line of the index.html Angular CLI should add script bundles created using Angular CLI or at least put them before the custom script?

Created Angular component not visible after 'ng build'

I'm new to Angular and recently I started working on a simple personal SPA project. It was created using the angular cli, and the folder structure is nothing special:
- myApp
----e2e
----node_modules
----src
--------app
------------ main app module with two .ts components and html for each of them
...
Everything works fine when I use ng serve: I can see my components on localhost:4200 and Angular's functionality works as a charm.
However, when I run ng build and from inside the newly created dist folder I open index.html, I can't see my components at all.
The index.html file is as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RoutingDemo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>
I get no errors in the console for missing files and all of the JS and CSS files are being successfully read by the index.html.
Can someone explain why am I not seeing the components?
So you need to serve your page, easiest way is to do npm i -g http-server and the run http-server from command lint in your dist folder, then you will be able to see your page

NPM install with jquery giving errors? Define is undefined?

I installed jquery with NPM and I'm trying to incorporate it into an existing webpage.
In the console I see the following error:
In my code, I have a skeleton like this:
<!DOCTYPE html>
<html lang='en'>
<head>
<title></title>
<link rel='stylesheet' type = 'text/css' href='css/' />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<script type='text/javascript' src='node_modules/jquery/src/jquery.js'></script>
<script type= 'text/javascript' src='javascript/script.js'></script>
</body>
</html>
Looking into the file itself and the error in the console, I see the following reflected both ways:
I'm not very familiar with define statements but from what I've seen crawling up and down google. It looks like I need to install a bundler like webpack?
But I feel like that's unneccessary for simply adding jQuery to a project without a cdn.
Am I barking up the wrong tree? Or is this a common issue?
Using npm install jquery is how you use jquery with node.js on the server itself.
It doesn't sound like that's what you're trying to do - rather that you want to use it on a webpage that is being served locally by your node server. To do that, download jQuery manually and include it in your sites file structure.
- index.html
- /scripts
- jquery-3.2.1.min.js
Then in your HTML reference it locally:
<script src="scripts/jquery-3.2.1.min.js"></script>

Why do I need to include multiple .js files in default.htm when working with typescript in visual studio?

I'm just starting out with typescript. I wanted to try working with this mankala example from within Visual Studio. Eventually I got it working but I had to include all of the .js files that were generated from .ts files in my default.htm file. The .htm file in the example only included one file - the one that contained the entry point. I'm guessing that there's something set wrong in my configuration that I'm compensating for by the multiple .js includes. Can anyone tell me what I'm doing wrong?
More details follow...
Here's what the original .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="game.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
And this is what my modified .htm file looked like:
<!DOCTYPE html>
<html>
<head>
<title>Mankala</title>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="Driver.js"></script>
<script type="text/javascript" src="Features.js"></script>
<script type="text/javascript" src="Game.js"></script>
<script type="text/javascript" src="geometry.js"></script>
<script type="text/javascript" src="Position.js"></script>
<link rel="stylesheet" type="text/css" href="play.css"/>
</head>
<body id="bod" onload="Mankala.testBrowser()">
<div class="hscore">Human: <span id="humscore">0</span></div>
<div class="cscore">Computer: <span id="compscore">0</span></div>
</body>
</html>
To create the project I created a default ( not quite empty ) typescript project, deleted the automatically created app.ts file from that project and then added 6 new .ts files with the same names as the .ts files in the example. Then I copied the .ts files from the example over the new .ts files that were created by VS. I replaced the automatically generated app.css file with the play.css file from the example and replaced the contents of the automatically generated default.htm file with the contents of the play.htm from the sample. This didn't run but after I added the additional .js files to default.htm it did.
I'm using Visual Studio 2012 Express for the Web and the typescript 0.8.3.1 VS extension. I'm using the Chrome browser on windows7.
The difference here is how the compiler got invoked.
When you build the Mankala sample, assuming you read the README, you ran
tsc Driver.ts -out game.js
The -out flag tells the compiler to concatenate the compilation into one big .js file. However, the default behavior in Visual Studio projects is to build side-by-side, i.e. base.ts creates base.js, Features.ts creates Features.js, etc.
You can fix your project file by adding a <TypeScriptOutFile>game.js</TypeScriptOutFile> element to the project in the same <PropertyGroup> as the other TypeScript settings (near line 57 in a default new project). Be sure to add to both the Debug and Release PropertyGroup elements if you want the same behavior in both compilation settings, or create a new non-conditional PropertyGroup.

Categories