CODEWITHSUNDEEP
node.jsangularangular-universal
dimson d
dimson d

Reputation: 1660

How to debug Angular universal?

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.

Upvotes: 54

Views: 9249

Answers (7)

JavaStudent
JavaStudent

Reputation: 113

In Visual Studio, you can debug a lot of stuff by attaching it to the process running the application.

For example when hosted on IIS:

  • Debug -> attach to process
  • Click on 'process' to sort descending
  • Then select the w3cp.exe process which lists the appPool next to it

Click attach, and restart the site from IIS and you should be able to debug within Visual Studio using breakpoints and by monitoring variables.

The only real difference if your using a different method of hosting should be the name of the process.

Upvotes: 0

Kondziutek
Kondziutek

Reputation: 135

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:

enter image description here

  1. 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:

enter image description here

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

Upvotes: 1

androbin
androbin

Reputation: 1759

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.

Upvotes: 0

joohi
joohi

Reputation: 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.

Upvotes: 0

Muhammad Numan
Muhammad Numan

Reputation: 249

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

Upvotes: -1

Kavinda Senarathne
Kavinda Senarathne

Reputation: 2004

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

Upvotes: -6

kris_IV
kris_IV

Reputation: 2444

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.

Upvotes: -1

Related Questions