I use Yeoman to do some angular development with grunt, livereload etc.
I've also set up a basic node.js/express app and I'm sharing some JS between the client (angular) and the server (node) using grunt-contrib-copy and grunt-express-server that fires on every file-save using watch. So far so good!
The problem is if I introduce a syntax error into the code that I want to share with node and hit save. The syntax error gets shown in the log and breaks/stops the watch. Then I have to go restart the watch in the console by doing $ ctrl+c and $ grunt server.
Is there a way to get grunt-express-server not to break/stop the watch that's going on if a syntax error is found in the js code?
I'm the author of grunt-express-server and working the issue here:
https://github.com/ericclemmons/grunt-express-server/issues/27
I've been able to work around this problem by running grunt-parallel or grunt-concurrent, which prevents errors from preventing execution of watch.
Related
I am using ExpressJS and would like to display internal debug messages, like here https://expressjs.com/en/guide/debugging.html.
When I am using this command in VS Code (Windows Powershell) "`set DEBUG=express:*; node ./dist/app.js" it is starting my Node/Express Server, however it does not display any debug messages. Do I have to add something to my code so it works?
"Express uses the debug module internally to log information about route matches, middleware functions that are in use, application mode, and the flow of the request-response cycle."
Do you have this package:
https://www.npmjs.com/package/debug
And there is no semicolon between the statements.
I tried the same in windows command prompt and it worked there just exchanged the semicolon for an ampersand.
set DEBUG=express:* & node ./dist/app.js
We have an install of Node.js running on a Windows Server 2012R2 web server. A developer created an application for us using Next/React/Node (I'm not a web developer so I'm unsure of the specifics of the various development tools used). This app works fine when manually started on the command line like this:
C:\NodeApps\pacifield>"C:\PROGRAM FILES\NODEJS\NODE.EXE" C:\NodeApps\pacifield\node_modules\next\dist\bin\next start
However this requires someone to manually login and restart the app whenever the server is rebooted or the app stops for whatever reason. I am trying to setup PM2 to run the app. I have it up and running fine until you browse to the app - at which point you get the following error:
next-server.ts:306 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (c:\NodeApps\pacifield\node_modules\react\cjs\react.development.js:1476:13)
at useContext (c:\NodeApps\pacifield\node_modules\react\cjs\react.development.js:1484:20)
at useSession (c:\NodeApps\pacifield\node_modules\next-auth\dist\client\index.js:75:39)
at Provider (c:\NodeApps\pacifield\node_modules\next-auth\dist\client\index.js:588:12)
at processChild (C:\NodeApps\pacifield\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14)
at resolve (C:\NodeApps\pacifield\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (C:\NodeApps\pacifield\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (C:\NodeApps\pacifield\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
at Object.renderToString (C:\NodeApps\pacifield\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
at Object.renderPage (C:\NodeApps\pacifield\node_modules\next\dist\server\render.js:596:45)
I have checked and there is only the one installation of React in C:\NodeApps\pacifield\node_modules\react and the other suggestions don't seem to make sense when it runs fine outside of PM2. I have checked with ProcessExplorer that all the environment variables are the same (except for the additional ones PM2 adds) when the app is run from the command line vs. PM2.
Anyone have any suggestions?
Hooks can only be call inside of functional component or inside another hook.
take note: Invalid Hook Call Warning
Notify your frontend developer it.
A Brief Backstory
I have been implementing several upgrades to an Angular 8 application such as server-side rendering, and Google Analytics. As most developers do, I would code then test then move on to the next task. Typically I use ng serve to run the application as I am developing.
With Server-side rendering, to test speed, lazy-loaded images, etc, you need to use a node express server running on a generated JS file. After building, etc, I use Node prerender (my js file is prerender.js) to see what the application will look like prerendering on the server.
When I run this command, I should not get any errors, and I know my prender file will start a local server on port 4000.
The Problem
I get errors when running a node express server that I do not get when running with ng serve I recently got an error that said:
Unhandled Promise rejection: Cannot read property 'subscribe' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'subscribe' of undefined
at new ApplicationRef (C:\4towerdevelopment\dist-stage\server\main.js:45910:37)
at _createClass (C:\4towerdevelopment\dist-stage\server\main.js:37184:20)
at _createProviderInstance (C:\4towerdevelopment\dist-stage\server\main.js:37138:26)
at initNgModule (C:\4towerdevelopment\dist-stage\server\main.js:37044:32)
at new NgModuleRef_ (C:\4towerdevelopment\dist-stage\server\main.js:38176:9)
at Object.createNgModuleRef (C:\4towerdevelopment\dist-stage\server\main.js:38159:12)
at NgModuleFactory_.create (C:\4towerdevelopment\dist-stage\server\main.js:50821:25)
at C:\4towerdevelopment\dist-stage\prerender.js:29175:43
at ZoneDelegate.invoke (C:\4towerdevelopment\dist-stage\prerender.js:481:26)
at Object.onInvoke (C:\4towerdevelopment\dist-stage\prerender.js:28683:33) TypeError: Cannot read property 'subscribe' of undefined
at new ApplicationRef (C:\4towerdevelopment\dist-stage\server\main.js:45910:37)
at _createClass (C:\4towerdevelopment\dist-stage\server\main.js:37184:20)
at _createProviderInstance (C:\4towerdevelopment\dist-stage\server\main.js:37138:26)
at initNgModule (C:\4towerdevelopment\dist-stage\server\main.js:37044:32)
at new NgModuleRef_ (C:\4towerdevelopment\dist-stage\server\main.js:38176:9)
at Object.createNgModuleRef (C:\4towerdevelopment\dist-stage\server\main.js:38159:12)
at NgModuleFactory_.create (C:\4towerdevelopment\dist-stage\server\main.js:50821:25)
at C:\4towerdevelopment\dist-stage\prerender.js:29175:43
at ZoneDelegate.invoke (C:\4towerdevelopment\dist-stage\prerender.js:481:26)
at Object.onInvoke (C:\4towerdevelopment\dist-stage\prerender.js:28683:33)
The closest this gets me to figuring what actually is causing the problem is letting me know that a provider somewhere is causing this error. Looks like something should be an observable rather than a subscription. Beyond that, I guess I just start looking through my providers. My question is:
How can I force Angular to possibly throw this error when developing using ng serve?
If I can't, is there a better way to debug this current error besides combing through each provider? Or at least a way to tell what service is causing the issue?
Thank you.
UPDATE: Basic repo with problem here. I made a new angular project, made sure dependencies were up to date, installed ngUniversal per this post, and received this same Unhandled promise message when running node prerender
Verbatim I went to to the Angular cli website, made a new project (default Angular version installed was 8.3), installed Angular Universal, and tried to build. Same error message as above.
This looks like it was ApplicationRef that triggered the error, and that class is provided internally by the Angular core.
It could be failing in the constructor of the class, and there are a few calls to subscribe on Zone observables. I don't think you're going to find anything in your source code that directly relates to this error. It looks like a build configuration problem.
https://github.com/angular/angular/blob/bb52fb798c8578c461d21aee2b7623232184a5d3/packages/core/src/application_ref.ts#L562
I do not know what could possibly produce this problem, but I would start a new project with SSR and compare the differences to your current project.
Eventually, I dropped the angular 6 approach using pre-render, and went with the latest universal package. There seems to be no problem building using npm run build:ssr and serving dist/server.js in an express server. I am not sure what the problem was with the pre-render approach, but it seems to be outdated anyways. #Reactgular thanks for the feedback.
I have recently started working with MongoDB and had it working for a small web test with node JS However. I new my implementation wasn't following a decent MVC structure. I began searching and found this website and read through it. It's implementation look good as well as following a good MVS skeleton structure.
Express/NodeJS/MongoDB CRUD Skeleton
I got to the part where he says 'HOORAY! We've got a functioning web server that is talking to Mongo. Part 1 is accomplished." Unfortunately, I went the local host specified and it says the 'site cannot be reached'. I am still fairly new to NodeJs, Mongo and Express and cannot figure out why it is not working.
I am not sure if I have done a step wrong time and time again which I doubt or if there something is missing that is stopping me from having it working.
The part before it says:
Awesome. Now to test it's all working in the terminal type npm start and you shouldn't see any errors:
kcoleman-mbp:nodewebapp kcoleman$ npm start
> nodewebapp#0.0.1 start /Users/kcoleman/Documents/projects/nodewebapp
> node ./bin/www
That part I get the same outcome with:
nodewebApp and node./bin/www
The page says to navigate to 127.0.0.0:3000, but the localhost usualy defaults to 127.0.0.1. I didn't see any code in the page where he defines the port to 127.0.0.0.
So try connecting to 127.0.0.1:3000.
Coming to nodewebApp and node./bin/www, it could be because the command might be present in pacakge.json. If you delete the nodewebApp from package.json, you won't be seeing the same in the command.
I am working on an AngularJS application that is delivered by a SocketStream/node.js server.
I have an AngularJS service that calls api functions on the SocketStream server and progress has been good so far.
But now the time has come to start writing the first tests and the first testing framework that came to mind is Karma/Jasmine, since this is the recommend AngularJS set up.
So far so good, but since my AngularJS modules are imported using 'require' (SocketStream's version, not require.js) and server api calls are part of the test, I need to configure Karma to load SocketStream (at least its client side).
I took a good look at 'https://github.com/yiwang/angular-phonecat-livescript-socketstream' but when I run this example I get run time errors, possibly because I have later versions of variuous dependencies installed.
I managed to get 'required' resolved by packing my SocketStream app by adding 'ss.client.packAssets()' to app.js and run 'SS_PACK=1 node app.js', but when I start karma it logs an error message saying:
'Chrome 23.0 (Linux) ERROR
Uncaught TypeError: undefined is not a function
at /the...path/client/static/assets/app/1368026081351.js:25'
'1368026081351.js' is the SocketStream packed assets file. If I don't load it the error message is something like 'require is undefined', so my best guess is that the error is happening somewhere inside the SocketStream require code. Also because I run karma in DEBUG mode and can see all the files being served.
I have been trying different approaches as to find out what is happening but to now avail. So my questions are:
Is anybody else successfully testing AngularJS/SocketStream using Karma?
Does anybody have any suggestions as to how I can fix, or at least debug this problem?
Are there any alternatives/better solutions?
Time to answer, sort of, my own question:
Sort of, because I came to the conclusion that Karma and node.js/SocketStream have a lot of overlap, so I decided to see if I can omit Karma altogether and deliver the Jasmine testing platform through SocketStream. It turns out that that is possible and here's how I did it:
I defined a new SocketStream route and client in my 'app.js' file:
ss.client.define( 'test', {
view: 'SpecRunner.html',
css: ['libs/test'],
code: ['libs', 'tests', 'app'],
tmpl: 'none'
});
ss.http.route( '/test', function(req, res) {
res.serveClient( 'test' );
});
I downloaded jasmine-standalone-1.3.1.zip and copied 'SpecRunner.html' to the 'client/views' folder. I then edited it to make it load AngularJS and all SocketStream client files, like all other views:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular-resource.min.js"></script>
<SocketStream/>
I removed the 'script' tags that import the sample source files ( 'Player.js' and 'Song.js' ) and specs but let the last 'script' block in place unmodified.
I then created a new folder inside 'client/css/libs' called 'test' and copied 'jasmine.css' in there unmodified.
Then I copied 'jasmine.js' and 'jasmine-html.js' renamed to '01-jasmine.js' and '02-jasmine-html.js' but otherwise unmodified, into '/client/code/libs'.
Now Jasmine is in place and will be invoked by using the '/test' route. The slightly unsatisfactory bit is that I haven't found an elegant place to store my spec files. They only work so far if I place them inside the 'libs' folder. Anywhere else and they are served by SocketStream as modules and are not run.
But I can live with that for now. I can run Jasmine tests without having to configure a special Karma setup.