Debug in TypeScript in Angular 4/CLI

2
votes

I am running a Karma/Jasmine on Angular 4 CLI environment. Sadly my tests do not allow me to debug in typescript as per the following link: [https://angular.io/guide/testing#test-debugging][1]

My project was setup by Angular/CLI and upgraded from Angular2 to 4, and is on a Windows 10 computer.

1
angulartypescriptkarma-jasmineangular-cli
In chrome Developer Tools under source tab check is there any webpack folder? - Sreemat
Yes, karma_webpack, containing 4 bundle javascript files. - Phil Huhn
U r running the application using ng serve? - Sreemat
Yes, I'm running the application using ng serve and karma by ng test. Vanilla CLI configuration. - Phil Huhn
Please refer to this answer: stackoverflow.com/a/51443584/6923507 - Adnan Abdul Khaliq

1 Answers

0
votes

I have a simple angular\cli project. Initial created the project with @angular/cli 1.0.2. When I run 'npm run test' the chrome browser launches and runs my jasmine test cases. At the very top of the page is a large 'DEBUG' button. Clicking this button with launch a 2nd page of tests. If you open the developer tools (f12), navigate to sources there is a folder called "webpack://". In the webpack folder there is a "." folder. This is your project folder and you should recognize you source code. At this point you can debug anything you want. i.e. the .spec.ts or the .ts files. Simply set a break point and refresh the page.

I recently upgraded to @angular/cli 1.1.3 when I did this my webpack folder disappeared. I have not been able to find where to debug with this latest version. I imagine there is most likely a version between 1.0.2 and 1.1.3 that still has the webpack folder but I have not found it yet. I have latest versions of everything else. i.e. @angular 4.2.4.

So until I figure out how to debug with @angular/cli 1.1.3 + I will be sticking with @angular/cli 1.0.2