Debugging Angular project

Question

Coming from an asp.net webforms/mvc/visual studio background.

I have created a new angular project (visual studio code) using cli. Made some changes to app.component.ts (but that's not important). Rendered page is absolutely empty.

I would like to know how to debug and know what is wrong?

Terminal shows

webpack: Compiled successfully. webpack: Compiling... Date: 2018-02-26T01:29:02.482Z - Hash: 8bdb62ab120b22cea391 - Time: 1415ms 4 unchanged chunks chunk {main} main.bundle.js (main) 34.9 kB [initial] [rendered]

Html rendered is absolutely blank.

I was hoping the terminal would point to the problem but apparently it doesn't. Also, chrome's developer tool console shows no error.

What are the first few things to check?

Answer 1

There are many ways to debug in Angular

1) You can debug typescript files by using Sources in a Chrome browser.

Steps: a) Open tsconfig.json file

b) Change SourceMap flag to true.

c) Open sources and put break point in .ts file in Chrome developer window.

2)Debugger for Chrome

Install Debugger extension for Chrome in Visual Studio Code.