Debug & Run Angular2 Typescript with Visual Studio Code?

by

After lot of research, I found these steps-

Before you begin, make sure you have latest version of VS code. You can verify latest version – Help > Check For Updates or About.

  1. Install extension called ‘Debugger for Chrome’. Once install complete, restart VS code.

  2. Go to Debug window, open launch.json using Chrome.

  3. In Launch.json configuration section, use below config

    {
    "name": "Launch localhost with sourcemaps",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000/Welcome",
    "sourceMaps": true,
    "webRoot": "${workspaceRoot}"
}

  4. In tsconfig.json, make sure you have “sourceMap”: true

This completes your debug environment settings.
Now, before you start debugging, make sure all your existing Chrome.exe instances are closed. Verify from Task Manager OR Use DOS command ‘killall chrome’

  1. Run your project, using npm start command and Chrome as default browser.

  2. Once application is run successfully, you will receive port number. Copy URL from chrome browser and paste into url section above.
    (NOTE: If you are using routing in your application then url would like above otherwise it will be ending index.html etc)

  3. Now, place breakpoints wherever you want in your typescript files.

  4. Again, go to debug window in VS code, and hit Run.
    Your tab/instance connected to debugger will looks like below.

Chrome Debugging

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Error when trying to inject a service into an angular component “EXCEPTION: Can’t resolve all parameters for component”, why?
  3. Read response headers from API response – Angular 5 + TypeScript
  4. Ionic 2 Form goes up when keyboard shows
  5. When to use square brackets [ ] in directives @Inputs and when not?
  6. Angular2 – Interaction between components using a service
  7. Reactive forms – disabled attribute
  8. How to implement sleep function in TypeScript?
  9. Testing error case with observables in services
  10. Build Angular2 HTML and TypeScript to a single file
  11. angular keyvalue pipe sort properties / iterate in order
  12. Angular subscribe elegant
  13. Trigger update of component view from service – No Provider for ChangeDetectorRef
  14. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  15. Pass parameter into route guard
  16. Typescript dependency injection public vs private
  17. Rxjs Retry with Delay function
  18. What is the meaning of question mark in expressions in Angular 2?
  19. Merging http observables using forkjoin
  20. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  21. Angular 2 translation change language in application
  22. Enabling CORS on Azure Active Directory
  23. How to use Bootstrap in an Angular project?
  24. What is pipe for in RxJS?
  25. How to throw error from RxJS map operator (angular)
  26. Angular reactive Form error: Must supply a value for form control with name:
  27. Angular, Http GET with parameter?
  28. Angular 2 disable sanitize
  29. Can I use Angular i18n to translate string literals in typescript code
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment