I suddenly cant debug my Angular Application. Not quite sure what I did. It might have happen after I updated node.js
Angular: 13.1.1
NodeJS: 18.1.0
VSCode: 1.67.1
Launch.json
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/src",
"sourceMaps": true,
},
]
Errors:
Could not read source map for http://localhost:4200/runtime.js: Unexpected 503 response from http://127.0.0.1:4200/runtime.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/vendor.js: Unexpected 503 response from http://127.0.0.1:4200/vendor.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/main.js: Unexpected 503 response from http://127.0.0.1:4200/main.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/styles.js: Unexpected 503 response from http://127.0.0.1:4200/styles.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/polyfills.js: Unexpected 503 response from http://127.0.0.1:4200/polyfills.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/scripts.js: Unexpected 503 response from http://127.0.0.1:4200/scripts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/common.js: Unexpected 503 response from http://127.0.0.1:4200/common.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/common.js: Unexpected 503 response from http://127.0.0.1:4200/common.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_lora_lora_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_lora_lora_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_telegrams_telegrams_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_telegrams_telegrams_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_items-management_items-management_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_items-management_items-management_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_model-management_model-management_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_model-management_model-management_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_key-management_key-management_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_key-management_key-management_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/default-src_app_model-management_services_items_service_ts-src_app_model-management_services_-687318.js: Unexpected 503 response from http://127.0.0.1:4200/default-src_app_model-management_services_items_service_ts-src_app_model-management_services_-687318.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_gum_gum_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_gum_gum_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
Could not read source map for http://localhost:4200/src_app_biot_biot_module_ts.js: Unexpected 503 response from http://127.0.0.1:4200/src_app_biot_biot_module_ts.js.map: connect ECONNREFUSED 127.0.0.1:4200
I actually had the same problem (using Angular 14 with NX).
The debugger would work on node 16 but not on node 18.
What made it work is adding the flag '--host=127.0.0.1' to the start script in package.json.
"start": "ng serve --host=127.0.0.1"
My launch json:
"version": "0.2.0",
"configurations": [
{
"name": "Debug Frontend",
"type": "pwa-chrome",
"request": "launch",
"preLaunchTask": "Serve Frontend",
"url": "http://localhost:4200/#",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:/*": "${webRoot}/*",
"/./*": "${webRoot}/*",
"/src/*": "${webRoot}/src/*",
"/*": "*",
"/./~/*": "${workspaceFolder}/node_modules/*"
}
}
My tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Serve Frontend",
"type": "npm",
"script": "start",
"isBackground": true,
"presentation": {
"focus": true,
"panel": "dedicated"
},
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": {
"owner": "typescript",
"source": "ts",
"applyTo": "closedDocuments",
"fileLocation": ["relative", "${cwd}"],
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "Compiled |Failed to compile."
}
}
}
}
]
}
Edit:
If you are using NX, you need to change the name of your script in tasks.json to match your package.json, as well as need to add the host to the start script in package.json:
"start:frontend": "nx serve frontend --host=127.0.0.1"
I have recently faced the same problem, which I could manage out by adding the suggested line:
"start": "ng serve --host=127.0.0.1"
It worked. However, I had to remember starting ng with the explicit host each time I wanted to debug. I ran "ng version" and suddenly the command complained that Angular did not support Node.js v.18!
I have uninstalled Node.js v.18 and then installed v.16. That has completely fixed the problem.
My system: Ubuntu 22, node 18.11
I figured out, it depends on two things:
node version or host ip
I switched to node 16.18, and it worked.
It depends also not on my launch.json config. "sourceMaps" is not needed:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to browser",
"port": 9222
}
]
}
Another fix (using node 18) is modify package.json:
"start": "ng serve --host=127.0.0.1",
Instead of:
"start": "ng serve",
I've found a simpler solution here.
With VSCode 1.74.0, Angular 14 and NodeJS 18 I simply added the resolveSourceMapLocations property to my launch.json:
{
"name": "Chrome debug",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "starter",
"sourceMaps": true,
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**"
],
}
No need to update the package.json serve configuration.
I have been working in parallel these last years in Angular projects created from version 7 to the most current and there is something that I have learned.
The version we use of Angular and Nodejs must be aligned.
Check out this helpful answer about compatibility between Angular CLI, Angular, Node.js, TypeScript and RxJS version compatibilities.
Changing settings on files didn't work for me, but running the app with the following comand solved the problem:
ng serve --host=127.0.0.1 --open
I downgraded NodeJS to version 14.19.x which fixed the issue for me.
Related
I am trying to debug my \event endpoint using AWS SAM in VSCode and I'm having issues with two of the configurations I've tried. The Direct Invoke Configuration I've used successfully in a different project, but in my current project it returns this error even though template.yaml and package.json are both in the EventsApi project directory.
{
"type": "aws-sam",
"request": "direct-invoke",
"name": "Direct Invoke Config",
"invokeTarget": {
"target": "api",
"templatePath": "template.yaml",
"logicalId": "AddEventFunction"
},
"api": {
"path": "/event",
"httpMethod": "post",
"payload": {
}
}
}
which produces this error
[ERROR]: SamLaunchRequestError: Failed to run launch configuration
-> Error: Cannot find package.json for: C:/aws/EventsApi/template.yaml
And the second configuration, which I attach in the SAM CLI to my AddEventFunction lambda in debug mode, then the debugger catches exceptions but won't hit any endpoints with this configuration. Please note that stopOnEntry is unable to be added to the attach configuration for some reason.
{
"name": "Attach to SAM CLI Config",
"type": "node",
"request": "attach",
"address": "localhost",
"port": 5858,
"localRoot": "${workspaceRoot}/src/handlers",
"remoteRoot": "",
"sourceMaps": true,
},
I expect the first configuration to find package.json just fine, and the second configuration to hit a breakpoint.
I've run into a problem with my React application, so I'm trying to debug. Normally, the application runs as expected, but when I try to run the app within the debugger, the following error is thrown:
Uncaught SyntaxError %FILEPATH%/src/index.js:1
import React from 'react'
SyntaxError: Cannot use import statement outside a module
This SO post asked about a similar problem, but I only receive the error message when using the debugger. Not at any other time. Last time, I had an error while debugging, it was a problem with my launch.json file. I am assuming the problem might be similar, but I need help figuring it out.
My current launch.json file looks like this:
{
"version": "0.2.0",
"configurations": [
{
"command": "npm start",
"name": "Run npm start",
"request": "launch",
"type": "node-terminal"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"cwd": "${workspaceFolder}\\frontend\\src",
"program": "${workspaceFolder}\\frontend\\src\\index.js"
}
]
}
Also, I'm using the node.js debugger that comes built into VSCode
I am working on a node.js application using express.js as a web framework listening on PORT 3000.
I am using VS Code v1.46.
My launch.json file is
{
// Use IntelliSense to learn about possible 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": "${workspaceFolder}\\WebApi\\index.js",
"restart": true,
"protocol": "inspector"
}
]
}
I am able to start the debugging session for the first time, but 2nd time onwards, I get error Error: listen EADDRINUSE: address already in use :::3000
This error is because VSCode didn't terminate the node.exe process created in 1st debugging session and so in the subsequent session node failed to start the express server on port 3000 as it is still in used.
Can anyone help me to configure VSCode to terminate node.exe process once I stop the debugger?
This issue started just last week for me, not sure why, maybe windows update.
Any way I found the following :
https://github.com/OmniSharp/omnisharp-vscode/issues/2387
where they say that if you add to launch.json
"console": "externalTerminal" or "console": 'integratedTerminal'
it will open a console for the process so that u can kill manually
It works fine with the Using the "preview" debug extension.
This is the launch.json for using that mode, just make sure that you put the correct command of your package.json.
{
"version": "0.2.0",
"configurations": [
{
"type": "node-terminal",
"name": "Run Script: start",
"request": "launch",
"command": "npm run start",
"cwd": "${workspaceFolder}"
}
]
}
Since I upgraded my node-lambda project from 6.10 node version to 8.10 my debug failed.
My config is:
{
// informations: https://go.microsoft.com/fwlink/?linkid=830387
// usefull environnement variables list at https://code.visualstudio.com/docs/editor/variables-reference
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Debug Node Lambda ",
"program": "/usr/local/bin/node-lambda",
"args": [
"run"
],
"preLaunchTask": "debug",
"postDebugTask": "clean",
"runtimeVersion": "8.10.0",
// "protocol": "inspector"
},
}
this is my output error message:
/home/gwendal/.nvm/versions/node/v8.10.0/bin/node --inspect-brk=24258 ../../../../usr/local/bin/node-lambda run
Debugger listening on ws://127.0.0.1:24258/d27c6111-ae5e-482a-a27a-e88829fd409f
Debugger attached.
Runtime [nodejs8.10] is not supported.
main.js:53
I don't find a way to make it works...
The problem is that I didn't update my node-lambda as sudo and with -g so the 11.7 version (needed for node 8.10) didn't work. All is right now.
I see the above when trying to debug Node.js script with Visual Studio Code.
My launch.json looks like
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"protocol": "legacy",
"processId": "${command:PickProcess}"
}
]
}
No matter I put the line "protocol": "legacy", or not I get exactly the same error as above.
My environment
System: OSX
Node: v8.6.0
VSC: 1.17.2
Also, I run the node script with PM2.
Any suggestion would be hugely appreciated
Node v8.6 does not support "legacy" protocol. You should use the "inspector" protocol.
I ran above the same issue using the "legacy" protocol while running the Hello World Extension. After searching a bit, I stumbled on this issue, and change my launch.json file to the following as suggested by #weinand:
{
"name": "Launch Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [ "--extensionDevelopmentPath=${workspaceRoot}" ],
"outFiles": [ "${workspaceRoot}/out/src/**/*.js" ]
}
using node 8.9.1
used the latest version of the yeoman generator for the code.