generator-angular-fullstack icon indicating copy to clipboard operation
generator-angular-fullstack copied to clipboard
verified publisher icon angular-fullstack

Unable to debug server side on IDE

Open aabm00 opened this issue 8 years ago • 7 comments

  • [ ] I understand that GitHub issues are not for tech support, but for questions specific to this generator, bug reports, and feature requests.
Item Version
generator-angular-fullstack 4.2.2
Node 6.9.2
npm 3.10.9
Operating System Windows 7
Item Answer
Transpiler TypeScript
Markup HTML
CSS CSS
Router ui-router
Client Tests Jasmine
DB MongoDB
Auth Y
socket.io

Hi

I always get the same error:

Error: listen EADDRINUSE :::40644

It doesn't matter what IDE I am using Webstorm or Visual Code . For example in Visual Code every time I run the debug it takes a random PORT so it's imposible that the port is always in use by other process.

The full error is:

Debugging with legacy protocol because Node.js v6.9.2 was detected.
C:\_PROGRAMACION\nodejs\node.exe --debug-brk=40644 --nolazy server\index.js 
Debugger listening on [::]:40644
(node:10544) DeprecationWarning: `open()` is deprecated in mongoose >= 4.11.0, use `openUri()` 
instead, or set the `useMongoClient` option if using `connect()` or `createConnection()`. See 
http://mongoosejs.com/docs/connections.html#use-mongo-client
Express server listening on 9000, in development mode
finished populating things
finished populating companies
finished populating machines
Error: listen EADDRINUSE :::40644
    at Object.exports._errnoException (util.js:1022:11)
    at exports._exceptionWithHostPort (util.js:1045:20)
    at Agent.Server._listen2 (net.js:1259:14)
    at listen (net.js:1295:10)
    at net.js:1405:9
    at _combinedTickCallback (internal/process/next_tick.js:77:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
finished populating users
webpack: wait until bundle finished: /socket.io-client/?EIO=3&transport=polling&t=Lr1fMRL&b64=1
webpack: wait until bundle finished: /socket.io-client/?EIO=3&transport=polling&t=Lr1fMUc&b64=1
[BS] Proxying: http://localhost:9000
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
      External: http://192.168.1.132:3000
 --------------------------------------
      UI: http://localhost:3002
     UI External: http://192.168.1.132:3002
  --------------------------------------
webpack: wait until bundle finished: /socket.io-client/?EIO=3&transport=polling&t=Lr1fSYL&b64=1

I add too the debug config file from the IDE :

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}\\server\\index.js",
           "outFiles": [
                "${workspaceRoot}/out/**/*.js"
             ]
         }

    ]
}

Sometimes when running gulp:serve I get the same kind of error:

Error: listen EADDRINUSE :::3001

Probably is related the full error is:

Error: listen EADDRINUSE :::3001
    at Object.exports._errnoException (util.js:1022:11)
    at exports._exceptionWithHostPort (util.js:1045:20)
    at Server._listen2 (net.js:1259:14)
    at listen (net.js:1295:10)
    at Server.listen (net.js:1391:5)
    at Object.startServer [as fn] (D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\browser-sync-ui\lib\async.js:118:39)
     at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\browser-sync-ui\lib\UI.js:184:14
    at iterate (D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\async-each-series\index.js:8:5)
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\async-each-series\index.js:16:16
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\browser-sync-ui\lib\UI.js:192:13
    at Object.setUrlOptions [as fn] (D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\browser-sync-ui\lib\async.js:72:9)
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\browser-sync-ui\lib\UI.js:184:14
    at iterate (D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\async-each-series\index.js:8:5)
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\async-each-series\index.js:16:16
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\browser-sync-ui\lib\UI.js:192:13
    at Object.setBsOptions [as fn] (D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\browser-sync-ui\lib\async.js:47:9)
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\browser-sync-ui\lib\UI.js:184:14
    at iterate (D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\async-each-series\index.js:8:5)
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\async-each-series\index.js:16:16
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\browser-sync-ui\lib\UI.js:192:13
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\browser-sync-ui\lib\async.js:19:13
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\portscanner\lib\portscanner.js:222:7
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\async\lib\async.js:789:30
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\async\lib\async.js:167:37
    at D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\portscanner\lib\portscanner.js:208:9
    at Socket.<anonymous> (D:\002_IOT\WS_IOT_V\TGM\tgm422\node_modules\portscanner\lib\portscanner.js:132:5)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
 [nodemon] app crashed - waiting for file changes before starting...

I would appreciate some help or if there is some workaround to debug !!!!

Thanks

aabm00 avatar Jul 14 '17 15:07 aabm00

The EADDRINUSE :::3001 results of browserSync and Socket.io both trying to listen on 3001. After a restart browserSync usually switches to 3002 and the problem is resolved.

However i have the same Problem with the IDE debugging. I've tried it a few times but never got it to work. I would also appreciate some help.

albert-92 avatar Jul 15 '17 09:07 albert-92

@albert-92 Thanks to answer.

Testing the ports and the PIDs (processes) used, I have noticed that there are always two PIDs that use the same port. The steps I have followed are:

1- I run the debug mode in Visual Code, as always it doesn't matter what port is used, always I get i.e the error:

Error: listen EADDRINUSE :::23071

2- Next, check in the console the PIDs used by the 23071 PORT, running:

netstat -aon

The result is :

  Conexiones activas

  Proto  Dirección local             Dirección remota        Estado               PID
  .......
  TCP    0.0.0.0:23071                0.0.0.0:0                      LISTENING         7488
  .......
  TCP    127.0.0.1:23071           127.0.0.1:64696           ESTABLISHED     7488
 .......
 TCP    127.0.0.1:64696           127.0.0.1:23071            ESTABLISHED      4040
 .......
 TCP    192.168.1.132:3000     192.168.1.135:56835    ESTABLISHED     7488
 .......
 TCP    192.168.1.132:3000     192.168.1.135:56836    ESTABLISHED     7488
 .......
 TCP    [::]:23071                     [::]:0                               LISTENING         7488

As shown the port 23071 is used by local and remote address and differents PIDs, 7488 and 4040 respectively. So the problem probably comes from here.

But I am wondering Why this happens, It's somethig related with the generator?

Thanks

aabm00 avatar Jul 31 '17 14:07 aabm00

I finally could pin down the problem.

in \server\config\express.js

browserSync.init({
      open: false,
      logFileChanges: false,
      proxy: `localhost:${config.port}`,
      ws: true,
      middleware: [
        webpackDevMiddleware(compiler, {
          noInfo: false,
          stats: {
            colors: true,
            timings: true,
            chunks: false
          }
        })
      ],
      port: config.browserSyncPort,
      plugins: ['bs-fullscreen-message'],
      ui: {
        port: 3002
      }
    });

the middleware: [...] is causing the Error: listen EADDRINUSE :::23071 error.

A temporary fix is to just comment it out, if you don't need it for server debuging;

browserSync.init({
      open: false,
      logFileChanges: false,
      proxy: `localhost:${config.port}`,
      ws: true,
     /* middleware: [
        webpackDevMiddleware(compiler, {
          noInfo: false,
          stats: {
            colors: true,
            timings: true,
            chunks: false
          }
        })
      ],*/
      port: config.browserSyncPort,
      plugins: ['bs-fullscreen-message'],
      ui: {
        port: 3002
      }
    });

Nevertheless i don't know what is causing the root problem. It might be browserSync or webpackDevMiddleware. It might have something to do with child process forking, but i couldn't figure out the real problem. Maybe someone else knows whats going on!?

albert-92 avatar Aug 02 '17 18:08 albert-92

Ok i found the root cause. It's in the package awesome-typescript-loader. The problem is in the checker.ts in line 24.

let checker: ChildProcess = childProcess.fork(path.join(__dirname, 'checker-runtime.js'));

Temporary fix is to change this line to

let checker: ChildProcess = childProcess.fork(path.join(__dirname, 'checker-runtime.js'), [], {execArgv: ['--debug=5859']});

This will spawn the child process with a different debug port so there is no conflict.

albert-92 avatar Aug 02 '17 22:08 albert-92

That's great.

I'll try it !!!!

Thanks

aabm00 avatar Aug 04 '17 11:08 aabm00

This worked for me, thank you @albert-92 ! It looks like newer versions of awesome-typescript-loader may automatically set a different debug port, but it appears to require Webpack 2? So not sure how to address other than manual fix.

cruisercohen avatar Aug 08 '17 22:08 cruisercohen

We should probably just update the version of webpack that the 4.x.x release branch uses. The canary branch uses webpack 2.x.x

Awk34 avatar Aug 12 '17 00:08 Awk34