How to debug Angular universal?

Question

I am using Angular Universal Starter repo. In angular 4 universal for ssr we could debug browser and node part of application in dev mode(see console), but now I do not see way to debug node part. I tried to execute ts-node server.ts with some changes( paths to files, etc), but angular seems needs aot compiled app and

throw Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped.

from docs:

Development (Client-side only rendering) - run npm run start which will start ng serve

Production (also for testing SSR/Pre-rendering locally) - npm run build:ssr && npm run serve:ssr

At first glance debug on Node.js in development do not work. At least from the box. May be someone resolve this issue.

Answer 1

Install the ts-node package.

npm install ts-node

Create a new launch configuration in your IDE for server.ts.

Set the type of the launch configuration to node.

Set the program of the launch configuration to server.ts.

Set the nodeArgs of the launch configuration to -r ts-node.

Start the debugger in your IDE.

This will start the Node.js server in debug mode. You can then step through your code and set breakpoints as needed.

Answer 2

Using VSCode I always debug my server side code with the help of Javascript Debug Terminal. Any node process that is started in this terminal has a debugger attached to it. The compilation of your code might be slower as having a debugger attached to it also. To open one use cmd+shift+P of ctrl+shift+P and search for Debug: JavaScript Debug Terminal.

Run your snippet like npm run dev:ssr in your terminal and the breakpoints will be used during rendering the app server side.

Answer 3

There are a couple of ways depending on what you want to achieve to debug @angular/ssr (@angular/universal before Angular 17) i.e.:

1. One nice way for apps like Angular SSR and Express that depend on the https://www.npmjs.com/package/debug package is to use DEBUG environment variable. In Linux you can prefix the command with ad-hoc environment variable and run it like this: DEBUG=* npm run serve or DEBUG=* npm run serve:ssr:testapp. A fine article which also shows processes and error levels you can put instead of * here: https://dev.to/aderchox/what-is-the-debug-environment-variable-in-nodejs-and-how-to-use-it-3fal Example output:

2. Use Node.js' inspector https://nodejs.org/en/learn/getting-started/debugging for example node --inspect ./node_modules/.bin/ng serve or node --inspect dist/testapp/server/server.mjs and then click on the green octagon in DevTools. This in turn, allows for measuring the performance and other fancy stuff of your Node.js app:

3. Use breakpoints in IDE ;) Check the setup of VSCode to debug Node.js here: Visual Studio Code - Node debugger breakpoints not being hit

Answer 4

You can't debug node part of your Angular 4 app in browser. Node work on server part so you can't see this in browser (client side).

Only way to debug this part when you start it from ts-node server.ts is to use external tools like WebStorm etc. If you start your App in TS mode from Debug mode you can use all features of this tools.

Answer 5

I think this small piece of code can help you

create the project

ng n debuggable-universal-server --interactive=false

cd debuggable-universal-server

add universal

ng add @nguniversal/express-engine --clientProject debuggable-universal-server

Answer 6

To create the server-side app module, app.server.module.ts, run the following CLI command.

ng add @nguniversal/express-engine

To start rendering your app with Universal on your local system, use the following command.

npm run dev:ssr