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.

Is it possible to use a service instead of the intense workload of Universal? Google bot should now be rendering SPAs just fine without it anyways: https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html — Ben Racicot, Jun 11 '19 at 19:11
Perhaps build the app and execute `node --inspect` manually. — gwest7, Feb 02 '21 at 09:56

score 0 · Answer 1 · answered Sep 14 '18 at 05:53

0

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.

answered Sep 14 '18 at 05:53

kris_IV

2,396
21
42

as i said, we cannot debug node part because of in dev application not using node part (Client-side only rendering) at all – dimson d Sep 15 '18 at 18:38
But you can always start ssr aplication in dev mode and debug it. – kris_IV Sep 15 '18 at 22:36

score 0 · Answer 2 · edited Nov 09 '21 at 14:16

0

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

edited Nov 09 '21 at 14:16

Suraj Rao

29,388
11
94
103

answered Nov 09 '21 at 13:57

Muhammad Numan

237
4
20

While this code snippet may be the solution, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Shawn Hemelstrand Jan 24 '23 at 05:14

score -4 · Answer 3 · answered Nov 16 '20 at 17:25

-4

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

answered Nov 16 '20 at 17:25

Kavinda Senarathne

1,813
13
15

How to debug Angular universal?

3 Answers3

create the project

add universal