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.
I have GitHub action to deploy the app to the server. I'm deploying the app and running a few commands to restart the app using ssh. Then, I'm starting the process using pm2. The problem is, It streams the log to the console stdout, and the Github action hags up with a timeout error. What I want to do is spawn the application instance without streaming the log to the console. Here is the command I'm using to start the app.
NODE_ENV=production && pm2 start ecosystem.config.json
and, here is the ecosystem configuration file.
{
"apps": [
{
"name": "apitoid",
"script": "src/index.js",
"instances": 1,
"autorestart": true,
"watch": false,
"time": true,
"env": {
"NODE_ENV": "production"
}
}
]
}
Is there any way I can prevent logging stream to stdout or no stdout in GitHub action workflow?
I am trying to get the PM2 logs in my backend server using PM2 API. I tried going through the docs but almost nothing related to logs.
I tried generating a pm2.launchBus but that only gets me current logs and not the old logs.
Usually for checking the pm2 logs:
run pm2 logs (process Id)
run pm2 show (process Id) and it would tell you the log location
May be not using PM2 API but a workable method would be read the logfile using fs and return to your client app
There isn't an API method to get the log data. You can only read it from disk. If you'd like to get more structured information about the log data you can configure the ecosystem (or process) JSON to either:
Add a timestamp
{
"apps" : [
{
"name": "app",
"script": "main.js",
"log_date_format": "YYYY-MM-DD hh:mm:ss"
}
]
}
Which results in:
2021-07-30 06:34:22: Hello World!
Write log entries as JSON
{
"apps" : [
{
"name": "app",
"script": "main.js",
"log_type": "json"
}
]
}
Which will get you:
{
"message": "Hello World!\n",
"timestamp": "2017-02-06T14:51:38.896Z",
"type": "out",
"process_id": 0,
"app_name": "app"
}
See Log Management docs
I am new in Node. I am trying to start a node service by using the following command --
export NODE_CONFIG_DIR=/var/www/api/config NODE_ENV=development PORT=3018; node /var/www/api/app.js
Inside the config directory I have the following file development.json
{
"general": {
"port": 3018
},
"database": {
"connectionString": "mongodb://***:***#url:port/api?replicaSet=set-578f3ed7000587"
},
"environmentName": "Development"
}
And I am getting the following line after starting node
The $NODE_CONFIG environment variable is malformed JSON
API listening on port 3018!
When I try accessing the api in browser I get 502 bad gateway. The node is running though.
Any help is highly appreciated.
I'm unable to use Visual Studio Code to debug my node application.
My .vscode/launch.json looks like this:
{
"version": "0.2.0",
"configurations": [{
"name": "Attach",
"type": "node",
"request": "attach",
"port": 9001
}]
}
I use grunt-contrib-connect to start my web server. My connect task is defined my my gruntfile.js like this:
connect: {
server: {
options: {
debug:true,
port: 9001,
base: '.',
livereload: true,
},
},
},
After successfully starting the web server with the above task, I try to attach from VSCode, but apart from some UI flashes, nothing seems to happen. No breakpoints are hit.
I read the VS Code Debugging Documentation, especially the Attaching VS Code to Node section, which is why I added the debug:true to my connect task. However this did not seem to fix anything.
If I understand the "port" in grunt-contrib.connect correctly, then this is the port on which the webserver will respond, not the debugging port.
So in your .vscode/launch.json you must specify the debug port not the webserver port. Since grunt uses node, I assume the debug port is node's default port 5858.