I'm using Meteor 1.0.3.1 on my local machine, and I'm deploying with node v0.10.36. However, the deploy machine only ever displays the iron-router splash screen... "iron:router" "Organize your Meteor application" ...
There are several other stacks about fixing this exact problem, including removing the tag and removing the projects npm.js file (left over from bootstrap). None of these are working.
project.js file is as follows:
Router.route('/', function () {
this.render('home');
});
Router.route('/about', function () {
this.render('about');
});
Router.route('/contact', function () {
this.render('contact');
});
Router.route('/legal', function () {
this.render('legal');
});
Router.route('imitationgamereview', function () {
this.render('imitationgamereview');
});
if (Meteor.isClient) {
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
project.html file is as follows:
<head>
<title>my sample project</title>
<link rel="shortcut icon" href="/favicon.ico?v=2" />
</head>
<template name="home">
test
</template>
Totally going bonkers! WTF iron-router? I'm so in love with you, then you do stuff to me like this!
Perhaps it has to do with the file location of your routing file (project.js). Moving the it to /lib solved the problem for me.
I was getting the same splash screen on x.meteor.com and --production emulation until i made sure that every
Meteor.publish({});
is in an if(Meteor.isServer) statement e.g.
if(Meteor.isServer) {
Meteor.publish('files', function() {
return Files.find();
});
}
This fixed the problem for me.
I've just had a similar problem, and i don't know if this applies to you, but in my case it was the fact that i had two templates (two HTML files) with the same template name. Once i removed one of them, all came back to normal.
I.e., i had this line in both file1.html and file2.html :
<template name="sampleList">
Nothing really indicated where the problem lied.
Related
I'm new in Javascript world, currently I'm trying to implement a GUI using electron js framework.
Trying to reproduce the code from a tutorial, I got stuck on a code which seems not to work on my PC, basically even if I click on a button, the console is not logging anything (when it should have!!); the aim of the code is to refer to a button defined in an index.html file from a index.js containing the script and log a sentence when the button is clicked, but it seems like the script in the html file cannot access the .js file at all. Here I'm reporting the code from index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>my-app</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<button id = "button1" > START </button>
<script>
require('./index.js');
</script>
</body>
</html>
Here the code belonging to index.js file:
const electron = require("electron");
const button1 = document.getElementById("button1");
button1.addEventListener("click", startApp);
function startApp(){
console.log("Button clicked!");
};
Note:
I've tried to debug this code based on my very little knowledge of Javascript and electron:
I used document.getElementById("button1"); in index.html and it does work (the variable obtained was used to change button text color), but the same is not working when reported in the index.js file;
I tried console.log("In index.js"); in index.js but still it is not working!
From these results I thought the problem may be the .html and .js file communication; they are in the same folder. One more thing: I downloaded the tutorial code from GitHub and the problem is still present with the same actions at points 1 and 2.
Edit: I've omitted that I'm linking index.html window and displaying it in the main.js file, in fact the windows does show up, but the the click on the button doesn't produce any action.
Seemed to be a problem with the require module not working in .html file.
Solved by replacing it with <script src="index.js"></script>.
It appears that you shoud be using electron to load the index.html via BrowserWindowonce it is ready. app and BrowserWindow are from the electron module.
`const { app, BrowserWindow } = require('electron')`
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
From the quick start
In Electron, browser windows can only be created after the app module's ready event is fired. You can wait for this event by using the app.whenReady() API. Call createWindow() after whenReady() resolves its Promise.
For futher info see https://www.electronjs.org/docs/tutorial/quick-start
Hope this proves useful.
I've been really intrigued by Svelte when I went through the documentation yesterday, but I'm struggling to set up even a pretty basic project and I can't seem to figure out what I'm doing wrong.
I'm starting out with the following HTML :
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='App.js'></script>
<script>
const application = new App({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
Then, I create the following App.html component :
<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
export default {}
</script>
I run svelte compile --format iife App.html > App.js, and everything works fine.
So far, so good!
Now, I create a Line.html component with the following content :
<div class="line">{{value}}</div>
<script>
export default {}
</script>
I modify my App.html component like this :
<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
import Line from './Line.html';
export default {
oncreate() {
const line = new Line({
target: document.querySelector( 'lines' ),
data: {
value: 'test'
}
});
}
}
</script>
I would expect this code to add something like <div class="line">test</div> to the DOM as a child of <div class="lines"></div>.
However, I get the following warning when I compile this code :
No name was supplied for imported module './Line.html'.
Guessing 'Line', but you should use options.globals
And when I try to run the compiled code, I just get the following output in my console :
App.js:250 Uncaught ReferenceError: Line is not defined at App.js:250
index.html:10 Uncaught TypeError: App is not a constructor at index.html:10
What am I doing wrong here?
Note
I also raised this issue on Github.
Copying the answer from GitHub:
svelte-cli works on individual files — you would need to compile Line.html separately, and include it on the page like so:
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='Line.js'></script> <!-- one for each component! -->
<script src='App.js'></script>
<script>
const application = new App({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
It will guess that Line.js is defining a global variable called Line, which is how App.js is able to reference it — but it prefers that you're explicit about that, by using the --globals option.
Needless to say, this is a huge pain — it doesn't scale at all past a certain point. For that reason we recommend that you use a build tool with Svelte integrated. That way, you don't have to worry about juggling all the different imported files, and as a bonus Svelte is able to generate more compact code (because it can deduplicate some helper functions between components).
The easiest way to get started — and I keep meaning to write a very short blog post about this — is to click the 'download' button in the REPL. That will give you a basic project setup that you can get running with npm run dev and npm start. Under the hood it uses Rollup to create a bundle that can run in the browser.
Here's your test app running in the REPL. Notice that the way we use the <Line> component is by declaring it using components, and just writing it into the template, rather than manually instantiating it with oncreate.
I'm 100% new to MEAN stack and currently trying to self-study it with the help of this video by Michael Moser (If you're reading this, thank you for making such an easy-to-understand video! :) ). I'm trying to make a very basic program with CRUD functionalities, but I can't get past this particular error message when loading the Angular JS file. Can somebody point me in the right direction?
Here are my codes:
package.json
{
"name": "starter-node-angular",
"main": "server.js",
"dependencies": {
"body-parser": "~1.4.2",
"express": "^4.5.1",
"method-override": "~2.0.2",
"mongoose": "~3.8.0"
}
}
server.js
// modules needed
// express - middleware
var express = require('express');
var app = express();
// listens for request to server and throws main.html as response
app.get('/', function(req,res) {
res.sendfile(__dirname + '/client/views/main.html');
});
// listens for request to server with 'scripts' in it and returns the appropriate file declared
// in the script tag
app.use('/scripts', express.static(__dirname + '/client/scripts'));
app.listen(3000, function(){
console.log("Ready...");
});
HTML
<html ng-app="ProductApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js" type="text/javascript"></script>
<script type="text/javascript" src="/client/scripts/main.js"></script>
<!-- stylesheets -->
<link href="/styles/main.css" rel="stylesheet" type="text/css">
</head>
<body class="main-background" ng-controller="MainController">
<!-- Area for Logo and Search Bar -->
<div class="header">
<div class="main-logo">
STUFF - Product Inventory v1.0
</div>
<div class="main-search">
<input type="text" class="search-field" placeholder="What are you looking for?" />
<img src="images/search-icon.png" title="Search" class="search-ico" />
</div>
</div>
<!-- Area for Add Button -->
<div class="add-container">
<div class="add-button" ng-click="addProduct(test);">
<img src="images/add-icon.png" title="Add" class="add-ico" />
<span class="add-text">Add Product</span>
</div>
</div>
</body>
</html>
AngularJS
'use strict';
var app = angular.module('ProductApp', []);
// Main controller
app.controller('MainController', ['$scope', function ($scope) {
// Search Products
$scope.searchProduct = function (param) {
// Search fxn goes here...
}
// Add products
$scope.addProduct = function (param) {
alert('Add product');
}
// Edit Products
$scope.updateProduct = function (param) {
// Update fxn goes here...
}
// Delete Product
$scope.deleteProduct = function (param) {
// Delete fxn goes here
}
}]);
I came from a background where calling JS files was simply declaring the full path in the src. Tbh, I find the entire MEAN setup a bit complex, with the "middleware" concept and all. :( I appreciate MongoDB's role in it, though.
Anyways, any help and advice would be greatly appreciated. God knows I need a lot of it right now.
Thank you.
Update 1:
I tried changing how my <script> tag calls my angular like so, with no success:
<script type="text/javascript" src="C:/users/myusername/documents/practice/product db/client/scripts/main.js"></script>
Also, am I right in thinking that localhost:3000 refers to Product DB in the following directory structure? I'm aware that 3000 is the port number; after looking at my error logs, I was thinking that localhost is just an alias for the source folder of the app.
Complete path is C:\users\myusername\documents\Practice\Product DB...
Thank you, as always. :)
You have included ng-app in the HTML tag, try adding that in the body of the page.
Do this:
<body class="main-background" ng-app="ProductApp" ng-controller="MainController">
Update:
you have done few mistakes while fetching stylesheets and scripts both. You need to define a proper static route which will work for all the static files(stylesheets and scripts).
you had defined yous static routed like this:
app.use('/scripts', express.static(__dirname + '/client/scripts'));
This will tell the node app to look into client/scripts folder, if any static route starts with /scripts. But you are trying to fetch your script using src="/client/scripts/main.js" which will not get anything, as /client is not defined , nor default '/' route is defined. It should be src="/scripts/main.js" instead.
One more mistake is while fetching stylesheets. you are using href="/styles/main.css", where again neither /styles nor / is defined, thus it will not be able to get the css file.
Try this instead:
Server.js
//define static routes like this
app.use(express.static(__dirname + '/client'));
// this will tell node app to look into the client folder, for any static file
HTML:
Fetch all your files like below:
To get stylesheets :
use /styles/filename
<link href="/styles/main.css" rel="stylesheet" type="text/css">
This will look into styles folder inside client folder.
To get scripts :
use /scripts/filename
<script type="text/javascript" src="/scripts/main.js"></script>
This will look into scripts folder inside client folder.
I'm making a game in JS using P5, and I came upon a problem.
In my html file I have references to .js files:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
<script src="main.js"></script>
<script src="isKeyPressed.js"></script>
<script src="blocks.js"></script>
<script src="player.js"></script>
</head>
<body>
</body>
</html>
I have one .js file defining the function isKeyPressed():
function isKeyPressed(keyQuery) {
var did = false;
for(var i = 0; i < keysPressed; i++) {
if(keysPressed[i] === keyQuery) {
did = true;
}
}
return did;
}
I reference this in another object inside player.js:
player.motion = function() {
if(isKeyPressed('w')) {
this.velocity.add(0,-5);
}
if(isKeyPressed('s')) {
this.velocity.add(0,5);
}
if(isKeyPressed('a')) {
this.velocity.add(-5,0);
}
if(isKeyPressed('d')) {
this.velocity.add(5,0);
}
}
But when I try to call player.motion, I get the error:
Uncaught TypeError: isKeyPressed is not a function
Does anyone know why this is occurring?
For the record, I don't think the accepted answer is correct. Specifically, I don't think the accepted answer really changes anything from what you were originally doing. My guess is that you had another problem in your code (like a syntax error) that was causing this error, and you fixed that in the process of implementing the suggested solution. So while it might look like the solution fixed your problem, really it was something else.
I'm providing this alternative answer so you don't think you have to define your JavaScript in your html directly, as that is definitely not the case.
I tried testing out your setup by creating a smaller example consisting of three files:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="one.js"></script>
<script src="two.js"></script>
</head>
<body onload="printObj()">
</body>
</html>
one.js
function printOne(){
console.log("one");
}
two.js
var obj = {};
obj.printTwo = function(){
console.log("two");
printOne();
}
function printObj(){
obj.printTwo();
}
This is pretty much exactly what your setup is, and it works fine. You absolutely do not need to put your JavaScript in your html. As long as the JavaScript files are correctly loaded in the proper order, then you can use functions and variables from one file in another file.
There are two main things that could cause your problem:
Are your files correctly loaded?
Are there any syntax errors you haven't noticed? (This is my guess as to what caused your original problem.) Check the JavaScript console, and try running some test code to actually run the functions you're trying to call.
Did you get all the file names correct?
Are you behind a firewall, or are there other network problems that might cause a problem with loading?
Are your files loaded in the proper order?
For file two.js to access code defined in one.js, you have to make sure one.js is loaded before two.js. It looks like you've done this correctly, but are you sure the JavaScript is where you think it is?
In other words, are you sure it was in player.js and not in main.js?
You might want to get rid of this ambiguity by placing related JavaScript in the same file. It doesn't make a ton of sense to have one file define a keysPressed array and then another file use that array to define an isKeyPressed() function. Just put them in the same file, and make sure that file is loaded before other files that use it.
The accepted answer doesn't change anything with regard to when stuff is loaded. Unless you had a syntax error, or the player.motion() function was actually in the main.js file, or you had a network loading problem, your code should have worked. So one of those things must be your actual problem. You do not have to define your JavaScript in your html for it to work.
I recommend not making a file name have capitals. So change it from
<script src="isKeyPressed.js"></script>
to
<script src="iskeypressed.js"></script>
also change the file name too.
You could try something like this
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.min.js"></script>
<script src="main.js"></script>
<script src="isKeyPressed.js"></script>
<script src="blocks.js"></script>
<script src="player.js"></script>
<script>
player.motion = function() {
if(isKeyPressed('w')) {
this.velocity.add(0,-5);
}
if(isKeyPressed('s')) {
this.velocity.add(0,5);
}
if(isKeyPressed('a')) {
this.velocity.add(-5,0);
}
if(isKeyPressed('d')) {
this.velocity.add(5,0);
}
}
</script>
</head>
<body>
</body>
</html>
This is importing all functions from the isKeyPressed.js file and therefore you are able to reference it in the <script> tag. You were not able to use isKeyPressed.js's functions in player.js because you cannot reference it.
I'm very much a noob to Angular. And I'm getting an error that I just can't figure out (even after much Googling and fiddling around).
Here's my code (and here it is on CodePen):
<!DOCTYPE html>
<html ng-app="ergo">
<title>Ergo</title>
</html>
<body ng-controller="ErgoController as ergo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script>
( function() {
var app = angular.module( "ergo", [] );
app.controller( "ErgoController", function() {
// TODO
} );
} );
</script>
</body>
</html>
The code above produces this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.5/$injector/modulerr?p0=ergo&p1=Error%3A%20…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min.js%3A17%3A339)
(Here's a link to the full URL from that error message.)
A few places on the web say that this can happen if the ngRoute module fails to load - it was formerly part of the Angular core, but was split out into its own module in 1.2.
Now, I'm not using ngRoute anywhere in this very simple page, so I don't understand how that could be the problem - but hey, I'll give it a shot. Here's my revised page (and the corresponding CodePen) - I've added another tag to load the ngRoute module, and also added 'ngRoute' as a dependency when instantiating my module:
<!DOCTYPE html>
<html ng-app="ergo">
<title>Ergo</title>
</html>
<body ng-controller="ErgoController as ergo">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.min.js"></script>
<script>
( function() {
var app = angular.module( "ergo", ['ngRoute'] );
app.controller( "ErgoController", function() {
// TODO
} );
} );
</script>
</body>
</html>
I still get the same error.
Help? I was doing pretty much the exact same thing the other day, and it was working fine. (Unfortunately, I don't have that code handy to examine.)
Secondary question: if you look at the errors in Chrome's JavaScript console after loading either of these pages, you'll see that the stack trace is full of references to this JavaScript file:
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js
Which is bizarre, because the URL I'm actually loading in my <script> tag is this:
http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js
(one URL contains .min; the other does not)
I looked at the network console to see whether angular.min.js was loading angular.js dynamically (for some bizarre reason), or maybe the .min URL was simply redirecting to the unminified version. Neither seems to be the case. So, why is the console showing references to a JavaScript file that, as far as I can tell, isn't even being loaded on this page?
It looks like you aren't invoking your function that sets up your angular app.
Try invoking that function and you should be good to go:
<script>
(function() {
var app = angular.module( "ergo", ['ngRoute'] );
app.controller( "ErgoController", function() {
// TODO
} );
})();
</script>