I have been building and debugging an Angular.JS application for several months now running from a browser without any issues whatsoever, however I am now in the stages of packaging it to run in node wrapper. When i created my package.json and ran the folder from nw.exe I get an error that says:
Uncaught node.js Error
ReferenceError: angular is not defined
at file:///C:/wamp/www/Maintenence/ng/ng-init.js:2:11
now the code line it has a problem with in ng-init.js is
var app = angular.module('MaintenenceApp', ['ngRoute']);
It doesnt like angular in angular.module and once I received this error I went to the angular.js docs to make sure i hadnt done something wrong here and according to https://docs.angularjs.org/guide/module this code is 100% correct.
what could be causing this error. as i mentioned, it runs perfectly in a web browser with no errors in js console.
package.json
{
"main": "index.html",
"name": "Maintenence Manager",
"version": "0.0.1",
"window": {
"toolbar": false,
"frame" : true
}
}
here is the order of my scripts in the head of index.html index.html
<didnt seem important to show css links and such but jquery is also in the page>
<script type="text/javascript" src="//code.angularjs.org/1.3.0-rc.0/angular.js"></script>
<Script type="text/javascript" src="//code.angularjs.org/1.3.0-rc.0/angular-route.js"></Script>
<script type="text/javascript" src="ng/ng-init.js"></script>
Thanks in advance.
As it turns out, Node Webkit doesn't support src="//url.com" which i use so the http/https thing doesn't become in issue.
Replacing the urls for the scripts with src="http://url.com" fixed my issue.
Related
I attempted to run a simple block of code featuring React "render" method , but the browser didn't display the text.
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello World</h1>,document.getElementById('root'));
I'm using VS Code as editor therefore I typed the "Run and Debug Node.js" command. It came up with the warning below
(node:3004) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
Setting "type:module" in the package.json file solved the problem but on the other side another problem arised
(node:18968) ExperimentalWarning: The ESM module loader is experimental.
warning.js:32
SyntaxError: Unexpected token '<'
at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
at async link (internal/modules/esm/module_job.js:37:21)
That won't allow me to write any tags whatsover. What am I missing and how can I solve it? Below is the index.html file and the file structure
<html>
<head>
<title> React Test</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
JSX isn't a valid JavaScript syntax and it isn't part of any ECMAScript specification as well at the current time. NodeJS supporting ESM does not mean it supports JSX natively.
JSX are expected to be transpiled into a valid JavaScript on build/compile time using tools like babel. If you are using React, the most simple way to do this is to use babel with #babel/preset-react, which will transpile all JSX into React.createElement() calls. You can then run the code generated by babel using node.
To give you a clearer picture, here is a Babel online REPL that you can play with to see how your code are transpiled by babel.
A common setup for react apps that is going to be run on the browser is like:
Use webpack to bundle your app
Configure webpack to use babel-loader so it transpiles your code into something that browsers can run
Use the generated javascript bundle on browser
I don't understand why you have .vscode folder in your src folder and it contains index.html and index.js files.
I think you need to move your index.js file from .vscode folder to src and delete .vscode folder. Or just create a new app with npm.
that folder structure came out after using create-react-app?
btw, try to return the component with React.createElement()
return React.createElement('div', {className: 'shopping-list'},
React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);
as docs says "The render method returns a description of what you want to see on the screen. React takes the description and displays the result. In particular, render returns a React element, which is a lightweight description of what to render. Most React developers use a special syntax called “JSX” which makes these structures easier to write. The syntax is transformed at build time to React.createElement('div')."
check this out
https://reactjs.org/docs/react-api.html#createelement
----- add on
You can now import .js file in node v12.x, in 2 steps:
after adding the following line in your package.json file:
// package.json
{
"type": "module"
}
you need to add --experimental-modules flag when launching the script:
node --experimental-modules index.js
https://nodejs.org/api/esm.html#esm_commonjs_json_and_native_modules
I'm having trouble using sails.io.js with angular2. I use the angular2-sails library.
First I decided to use with a code inside my app.component.ts
this._sailsService.connect(this.url);
It works but when I launched the app I also have those messages "Socket is trying to reconnect to Sails.." I checked, it's trying to connect to port 4200.
I used sails.io.js with
"scripts": ["sails.io.js"]
in angular-cli.json. But I tried something else :
<script src="sails.io.js"> // I also tried src="src/sails.io.js
</script>
<script type="text/javascript">
io.sails.useCORSRouteToGetCookie = false;
io.sails.url = 'http://localhost:1337';
</script>
in index.html, and my browser returns that it cannot load the script at "http://localhost:4200/sails.io.js" or "http://localhost:4200/src/sails.io.js"
folders :
app.js
angular-cli.json
src
-index.html
-sails.io.js
-app
--app.component.ts
I don't know why it tries to connect to 4200 when it's called in the angular-cli.json and why it can't access my sails.io.js when called in the index.
My socket.js file can not be found when my Node.js server runs on Heroku, however when it runs on localhost, it is found. In addition, although the app.js file is in the same directory with socket.js file, it can not be found. I've seen some posts suggesting to use
app.use('/', express.static(__dirname));
but i guess it is not the case here.
my index.html file :
<script src="/angular-socket-io/socket.js"></script>
<script src="/socket.js"></script>
<script src="/socket.io/socket.io.js"></script>
Amongst them, the only one couldnt be found is the second directory(/socket.js) which contains the 'socket factory'inside.
My folder tree is as follows;
-app
--assets
---app.js
---socket.js
Any help please?
Just add app.use(express.static(path.join(__dirname, 'app/assets'))); to your main code and after that you can use <script src="/socket.js"></script>
My JavaScript file didn't initialize because of how I imported the JQuery script inside of my index.html.
If your JavaScript file that contains JQuery is not initialized. Make sure to import it with HTTPS not HTTP.
WRONG :
<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
CORRECT :
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
This solved my problem of missing the JavaScript file on Heroku.
I've tried to deploy my Durandal based solution. But I'm getting the following error once deployed.
Uncaught ReferenceError: requirejs is not defined main.js:1
(anonymous function)
I explored the files that got deployed with the projects, and require was included in the solution/path. The files have been deployed along with them. All that is different between the development and production copy is that my java script files get compressed. My next step is to see if this is related to the issue in any way?
Update:
I found the source of the problem to be the following:
<body>
<div id="applicationHost">
#Html.Partial("_splash")
</div>
#Scripts.Render("~/scripts/vendor")
#if (HttpContext.Current.IsDebuggingEnabled)
{
<script type="text/javascript" src="~/App/durandal/amd/require.js" data-main="#Url.Content("~/App/main")"></script>
}
else
{
<script type="text/javascript" src="~/App/main.js"></script>
}
</body>
If i remove the IsDebuggingEnabled check, and just leave the following it all works (obviously)
<script type="text/javascript" src="~/App/durandal/amd/require.js" data-main="#Url.Content("~/App/main")"></script>
As far as I remember, I haven't touched this code (created on initial project setup by template). So should all be as is from the Durandal VSX template.
Any idea why require would be removed during a non debugging deployment? :/
Durandal 1.2 comes with an optimizer.exe (http://durandaljs.com/documentation/Optimizing-On-Dot-Net/) that creates a optimized version main-built.js that has either Almond (default) or RequireJS bundled. The example above tries to load the source main.js that's why the error is thrown.
After running optimizer.exe successfully the code should be changed to this.
...
else
{
<script type="text/javascript" src="~/App/main-built.js"></script>
}
As far as I have seen, there is no explanation as to where we are to locate the client side script for socket.io if node.js is not used as the web server. I've found a whole directory of client side files, but I need them in a combined version (like it's served when using node.js webs servers). Any ideas?
The best way I have found to do this is to use bower.
bower install socket.io-client --save
and include the following in your app's HTML:
<script src="/bower_components/socket.io-client/socket.io.js"></script>
That way you can treat the socket.io part of your client the same way you treat any other managed package.
socket.io.js is what you're going to put into your client-side html. Something like:
<script type="text/javascript" src="socket.io.js"></script>
my script is located:
/usr/local/lib/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js
copy that file to where you want your server to serve it.
I think that better and proper way is to load it from this url
src="/socket.io/socket.io.js"
on the domain where socket.io runs. What is positive on this solution is that if you update your socket.io npm module, your client file gets updated too and you don't have to copy it every time manually.
I used bower as suggested in Matt Way's answer, and that worked great, but then the library itself didn't have its own bower.json file.
This meant that the bower-main-files Gulp plugin that I'm using to find my dependencies' JS files did not pull in socket.io, and I was getting an error on page load. Adding an override to my project's bower.json worked around the issue.
First install the library with bower:
bower install socket.io-client --save
Then add the override to your project's bower.json:
"overrides": {
"socket.io-client": {
"main": ["socket.io.js"]
}
}
For everyone who runs wiredep and gets the "socket.io-client was not injected in your file." error:
Modify your wiredep task like this:
wiredep: {
..
main: {
..
overrides: {
'socket.io-client': {
main: 'socket.io.js'
}
}
}
If you are using bower.json, add the socket.io-client dependency.
"socket.io-client": "0.9.x"
Then run bower install to download socket.io-client.
Then add the script tag in your HTML.
<script src="bower_components/socket.io-client/dist/socket.io.min.js"></script>
I have created a bower compatible socket.io-client that can be install like this :
bower install sio-client --save
or for development usage :
bower install sio-client --save-dev
link to repo
if you use https://github.com/btford/angular-socket-io
make sure to have your index.html like this:
<!-- https://raw.githubusercontent.com/socketio/socket.io-client/master/socket.io.js -->
<script src="socket.io.js"></script>
<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- ...... -->
<script src="bower_components/angular-socket-io/socket.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script type="text/javascript" charset="utf-8">
angular.module('myapp', [
// ...
'btford.socket-io'
]);
// do your angular/socket stuff
</script>