What are the best techniques for effectively debugging TypeScript in Visual Studio Code?

When using Node Package Manager, your package.json file may contain scripts like the following:

(dependencies and devDependencies omitted)..
"scripts": {
    "start": "concurrently \"npm run tscwatch\" \"npm run lite\" ",
    "tsc": "tsc",
    "tscwatch": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  }

To run your application, navigate to the folder level you are at and type:

npm install

Then,

npm start

The lite server will host your application and compile TypeScript to JavaScript if your tsconfig.json is set up correctly. If you're having trouble debugging TypeScript with Angular in VS Code, you can try adding a 'launch.json' configuration for NPM like this:

 {
        "type": "node",
        "request": "launch",
        "name": "Launch via NPM ProAngular Example",
        "runtimeExecutable": "npm",
        "args": ["${relativeFile}"],
        "runtimeArgs": [
            "start"
        ]
    }

However, some users have reported issues with this approach resulting in error messages. Debugging TypeScripts within an Angular environment in VS Code can be challenging, but there are alternative configurations and methods available.

Answer №1

Here are the steps to follow in VSCode:

1- First, download the latest version of VS Code and install the Chrome debugger extension

2- Ensure that you have at least Chrome version 59 installed (refer to this issue for more information)

3- Use angular-cli to create your Angular app

4- Create a configuration file named launch.jsonfile for the VS Code debugger and place it inside the .vscode folder in your main directory.

 {
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome with ng serve",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceRoot}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome with ng test",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    }
  ]
} 

  1. To begin running your Angular app, use the command ng serve in your preferred terminal.

  2. Start debugging in VS Code by either pressing F5 or navigating to the debug section, selecting Launch Chrome with ng serve, and then clicking the green debug icon.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Managing form input in Ionic2 components from external sources in Angular2

Hello there, I am currently facing an issue with managing form validation along with proper styling for nested forms. Here's what I'm aiming to achieve: I have a Page that displays Tabs components with four tabs. Each tab represents a separate @ ...

The design of the Angular2 bootstrap navbar is very underwhelming

Struggling to implement Bootstrap's navbar in my Angular 2 application, but the navigation items appear distorted: https://i.sstatic.net/x4vlS.png Interestingly, when hovering over any of the items, they display perfectly (as shown with the mouse ov ...

Arranging JSON elements according to a separate array in Angular 2 or Node.js

Looking for a solution with optimal performance, I am seeking to achieve the rearrangement of a list using either Angular2 or NodeJS. My input consists of user fruit preferences' IDs {15, 43, 55, 67, 98}; In addition, I have a JSON object containin ...

The ngModelChange and change events are not activated when using md-select

Here is the code snippet I am working with: <md-select [(ngModel)]="model" (change)="updateModel()" (ngModelChange)="model=$event;updateModel()"> [...] <md-select> However, I am encountering an issue where when I update the model programmati ...

Launch an Angular 2 application in a separate tab, passing post parameters and retrieve the parameters within the Angular 2 framework

One of the requirements for my Angular 2 application is that it must be able to capture post parameters when opened in a new tab from a website. How can I achieve this functionality in Angular 2? Is there a way to capture post parameters using Angular 2? ...

A cautionary alert is triggered by vsCode when analyzing seemingly correct code sourced from vue.js documentation

While using Visual Studio Code version 1.13.1V and referring to the vue.js guide on lazy loading, I encountered an issue when writing the following code snippet: import Vue from 'vue' import Router from 'vue-router' const Health = () = ...

Angular 2/4 and RxJS - Managing subscriptions with forEach loop to ensure that program flow waits for all observables to complete before moving on

My objective is to loop through a set of IDs, send an HTTP request for each ID, and gather the results in an array. I am utilizing a service that includes a get() method returning an Observable for each call. Upon subscribing to the returned Observable in ...

Activating Modal in Angular 5 when Form is Submitted

I am currently integrating Angular 5 and Bootstrap 3 for a project. One of the forms on my website sends the input field data via email and includes a modal. I want to be able to trigger the modal based on a successful or error response from the server. I ...

Should we rethink using nested *ngFor loops in Angular 7?

Currently, I am dealing with an object that consists of an array. This array has the capability to contain one or multiple objects similar to the parent object. The levels of nesting in this structure could potentially be infinite. To showcase all the data ...

Determine the maximum and minimum numbers by inputting a number and utilizing jQuery

<script type="text/javascript"> function findLargestNumber() { var number1, number2; number1 = Number(document.getElementById("N").value); number2 = Number(document.getElementById("M").value); if (number1 > numb ...

Using ng-template in ContentChildren causes the component to throw an ExpressionChangedAfterItHasBeenCheckedError

I've encountered the ExpressionChangedAfterItHasBeenCheckedError error while working on an Angular project, and this time I'm stuck on how to resolve it. The component I'm dealing with has child components utilizing @ContentChild and @Conte ...

Angular QueryList produces varying types compared to what is obtained from a click event listener

I'm experiencing an issue when comparing the content of a list of QueryList<ElementRef>. I need to differentiate certain elements in order to create a closing logic for a menu. In my toolbar, I have buttons that are Angular Material buttons of ...

The fillFormValues function is not functioning properly within the mat-select element

I need help filling a form value by id. This function successfully retrieves the value: fillFormValues(expenseCategory: ExpenseCategory): void { console.log('response', expenseCategory.parent_category) this.aa= expenseCategory.parent_c ...

Creating a data structure that consists of pairs of elements, inspired by the alignment of domino bricks, using TypeScript syntax

My goal is to establish a type alias in TypeScript that allows all values which are arrays of Domino pairs, where each pair connects like domino bricks: Pair<A,B> connects with Pair<C,D> only if B = C. For example: const chain1: DominoChain = ...

I am looking for ways to identify the specific code responsible for causing a JavaScript heap out of memory issue

When I attempt to execute yarn start, I encounter the following error message: Starting the development server... ts-loader: Using [email protected] and C:\DevTools\git\mymoto\tsconfig.json <--- Last few GCs ---> [9076:000 ...

Guide to accessing nested form controls within an array and object in Angular Reactive Forms

As a newcomer to Angular, I am in the process of creating a complex form for a food delivery application that I have been developing. The form I am currently working on is designed to allow me to add a new menu item to a restaurant's menu. In this A ...

I'm having trouble locating a declaration file for the module 'vue-prism-component'

Currently utilizing Vue 3 (Composition API), Vite, and Typescript but encountering a missing module issue with vue-prism-component. <script lang="ts" setup> import 'prismjs' import 'prismjs/themes/prism-tomorrow.css' imp ...

Developing a TypeScript library for versatile features across multiple projects

My goal is to export multiple classes, some independent and others interdependent, encapsulated within a single namespace, in the form of a module for external project utilization. To achieve this, I have configured a webpack build to compile these classe ...

Learn the steps to translate conditional string interpolation with NGX-translate

My application has a toggle button that dynamically changes the label to either 'Enabled' or 'Disabled'. I am attempting to utilize ngx-translate for translation, but I am encountering difficulties in achieving this. Can anyone provide ...

The function parseArgs in the documentation sample code will throw a type error

import { parseArgs } from 'node:util' const args = [] const options = { t: { type: "string" } } const { values, positionals } = parseArgs({ args, options }) This code snippet is taken directly from the documentation example ...