Can't debug Server Typescript in an Angular SSR project

[Talb2005]

Command

other

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I've created a new project with ng new --ssr and spent several days trying to figure out how to debug the server.ts file in VS Code.
I've tried using ts-node and tsx, with many different configuration changes in tsconfig.json and package.json, but couldn't get it to work.
I only managed to set a breakpoint in the generated server.mjs file, which isn't convenient.
I also don't understand how to work with the generated sourcemaps e.g server.mjs.map.
I couldn't find any relevant documentation in angular.dev, stackoverflow or anywhere else.. even ChatGPT took me on a wild goose chase which did not succeed.
Is it even possible to debug server.ts in an angular ssr project? If so, I would greatly appreciate some advice.

Minimal Reproduction

1. ng new test-project --ssr
2. update angular.json with "sourceMap": true in the production build configuration.
3. ng build
4. Set a breakpoint in server.ts - it will be red
5. Add "Launch Program" configuration to launch.json, with "program" pointing to server.mjs and "sourceMaps": true
6. Execute "Launch Program" debug.
7. The server will start, but the breakpoint in server.ts will become an empty circle - Unbound breakpoint.

Exception or Error

No response

Your Environment

Angular CLI: 18.0.2
Node: 20.11.1
Package Manager: npm 10.8.1
OS: darwin x64

Angular: 18.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... localize, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.2
@angular-devkit/build-angular   18.0.2
@angular-devkit/core            18.0.2
@angular-devkit/schematics      18.0.2
@angular/cli                    18.0.2
@angular/ssr                    18.0.2
@schematics/angular             18.0.2
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.6

Anything else relevant?

I don't think it matters, but I'm using macOS 14.5, VS Code 1.89.1, npm 10.8.1.

[alan-agius4]

To debug SSR, you need to use the Node.js inspector. Run the command node --inspect-brk node_modules/.bin/ng serve. I discussed this with @clydin yesterday, and we decided to add an option in ng serve to automatically include the inspector.

[Talb2005]

Thanks for your reply @alan-agius4.
I would like to debug server.ts, which is the entry point for my API routes.
Would debugging the ng serve process let me achieve that?
From what I understand, ng serve doesn't use server.ts at all. Correct?

I've just tried node --inspect-brk node_modules/.bin/ng serve on a new ssr project and all I see is
Debugger listening on ws://127.0.0.1:9229/dc4150f4-c734-437b-8f2a-7f0acec721cc For help, see: https://nodejs.org/en/docs/inspector
But it doesn't serve anything and the debugger isn't stopping on any breakpoints.

[alan-agius4]

I would like to debug server.ts, which is the entry point for my API routes.
Would debugging the ng serve process let me achieve that?
From what I understand, ng serve doesn't use server.ts at all. Correct?

Correct, in that case you need to use node --inspect-brk dist/<project>/server/server.mjs

But it doesn't serve anything and the debugger isn't stopping on any breakpoints.

Are you attaching to the inspector process from your IDE? There are a large number resources online on how you can debug a Node.js application using various IDEs.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}