The breakpoint was overlooked due to the absence of generated code for TypeScript on a Windows operating system

Currently, I am in the process of debugging a TypeScript project. The structure of the project folder and tsconfig.json file is illustrated below:

https://i.sstatic.net/epIEC.jpg

Furthermore, my launch.json file is displayed below:

https://i.sstatic.net/NRSK0.jpg

While attempting to debug, I have noticed that .map files are being generated. This outcome occurred after making modifications and including the following lines within my launch file:

"sourceMaps": true,
"outFiles": ["${workspaceFolder}\\typeScript\\**\\*.js"]

Despite these configurations, I am puzzled why VS Code continues to display "Breakpoint ignored ..." when setting breakpoints within .ts files. It seems as though VS Code is either unable to locate or misinterpreting the .map file.

Included here is a screenshot showcasing the generated map file. Upon initial inspection, the path appears correct.

https://i.sstatic.net/1aTnL.jpg

A noteworthy observation during the configuration experimentation was the distinction between windows file paths recognized in tsconfig.json (using "\\") versus those found in the .map file (using "/"). I am uncertain if this variance holds any relevance.

typescriptvisual-studio-code

Answer №1

Based on the information provided, it's difficult to give a definitive answer. However, I can share my approach:

Here is a glimpse of my tsconfig.json setup:

{
    "compilerOptions": {
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": ["es2017", "dom"],
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "../build",
        "sourceMap": true,
        "target": "es2016",
        "typeRoots": [
            "../node_modules/@types"
        ]
    },
    "include": [
        "**/*.ts"
    ],
    "exclude": [
        "../node_modules",
        "../*.js"
    ]
}

My directory structure resembles this:

https://i.sstatic.net/4fpjp.png

In my workspace, src and build folders coexist, aiding in organizing files logically.

Let's move on to the launch configuration:

{
    "type": "node",
    "request": "launch",
    "name": "Start and Debug",
    "preLaunchTask": "nb-tsc-watch",
    "timeout": 10000,
    "program": "${workspaceFolder}/backend/src/app.ts",
    "restart": true,
    "cwd": "${workspaceRoot}",
    "outFiles": [
        "${workspaceFolder}/backend//build/**/*.js"
    ],
    "sourceMaps": true
}

You have flexibility in choosing the preLaunchTask or skipping it entirely.

The task nb-tsc-watch involves:

{
    "label": "nb-tsc-watch",
    "type": "typescript",
    "tsconfig": "backend/src/tsconfig.json",
    "option": "watch",
    "problemMatcher": [
        "$tsc-watch"
    ]
}

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

Error encountered when referencing prop on textarea: 'There is no suitable overload for this call'

I've been referring to the documentation in order to set a reference using the useRef hook, with the goal of being able to programmatically clear an input field. However, when I add ref as a prop to a textarea, it triggers a lint error saying that no ...

reactjstypescript

Challenge encountered with asynchronous angular queries

Dealing with asynchronous calls in Angular can be tricky. One common issue is getting an array as undefined due to the asynchronous nature of the calls. How can this be solved? private fetchData(id){ var array = []; this.httpClient.get('someUrl ...

javascriptangulartypescriptrxjs5

TypeScript Tutorial: How to retrieve the data type of a deeply nested object

I have a question about extracting the type of a nested object with similar structures. The object in question contains multiple sub-objects that all follow the same pattern. const VALUES = { currentStreak: { display: "Current streak", ...

typescripttypes

Incorporating ngrx/Store into a current Angular application

Currently, I am working on an Angular 7 project that consists of numerous components communicating with an API to update data. The constant refreshing of the data using setTimeout has made it quite overwhelming as all the components are pulling data from t ...

node.jsangulartypescriptrxjsngrx

Developing a TypeScript NodeJS module

I've been working on creating a Node module using TypeScript, and here is my progress so far: MysqlMapper.ts export class MysqlMapper{ private _config: Mysql.IConnectionConfig; private openConnection(): Mysql.IConnection{ ... } ...

javascriptnode.jstypescriptcommonjs

Upon the initial loading of GoJS and Angular Links, nodes are not bypassed

Hey there, I'm currently working on a workflow editor and renderer using Angular and GoJS. Everything seems to be in order, except for this one pesky bug that's bothering me. When the page first loads, the links don't avoid nodes properly. H ...

angulartypescriptrenderinggojs

What is the correct way to close an ngx-contextmenu in an Angular application?

In my angular project, I implemented an ngx-contextmenu. Within one of my components, the template includes the following code: <div... [contextMenu]="basicMenu"> <context-menu>..... </div> After some time, the component with the conte ...

angulartypescriptngx-contextmenu

Dealing with 'TypeError X is Not a Function' Error in Angular (TypeScript): Occurrences in Certain Scenarios and Absence in Others

Recently, I came across an odd issue in Angular 14 where a type error kept popping up. Although I managed to refactor the code and find a workaround, I'm quite intrigued as to why this issue is happening so that I can prevent it from occurring again i ...

angulartypescriptservicetypeerror

Tally the number of sub-labels associated with each main label

In my Angular 9 application, I am looking to separate an array based on the lable field. Within each separated array, I would like to determine the count based on the subLable field. This is the array I am working with: [ {"id":1,"socia ...

javascriptangulartypescriptangular9

The Jest type definitions seem to be malfunctioning in this TypeScript project

Recently, I began a new Typescript project utilizing GTS. While the typings are functioning correctly for regular *.ts files, I am encountering difficulties in getting *.spec.ts files to work. Issue Each jest function is being flagged as red by ESLint wit ...

typescriptjestjstslintgts

The node express request aliases are not displayed in VS Code

I am new to coding, on the left is my Vs Code interface and on the right is the example I want to achieve. Can someone guide me on how to enable it? Any assistance would be greatly appreciated. example ...

node.jsexpressvisual-studio-code

Guide to Setting Up Infinite Scroll with Next JS SSG

I recently built a markdown blog using the Next Js documentation and incorporated Typescript. When trying to retrieve a list of blog posts, I utilized getStaticProps as recommended in the documentation. However, my attempts with certain npm packages were u ...

reactjstypescriptnext.js

"Upon invoking the services provider in Ionic 2, an unexpected undefined value was

I encountered an issue while setting a value in the constructor of my page's constructor class. I made a call to the provider to fetch data. Within the service call, I was able to retrieve the data successfully. However, when I tried to access my vari ...

angulartypescriptionic2ionic3

What is the process for exporting libraries in TypeScript?

Encountering an error when attempting to export socket.io using this method import socketIOClient from 'socket.io-client';. The error message is TS1192: Module '"***/node_modules/socket.io-client/build/index"' has no default e ...

node.jstypescript

Creating a versatile TypeScript Record that can accommodate multiple data types

I have a question regarding the use of Record in TypeScript. When I specify Record as the parameter type in a function, I encounter an error in my code because it does not allow different types. type Keys = 'name' | 'qty'; const getVal ...

typescripttypesrecord

Determining the data type of a generic variable within an Angular component

I'm currently in the process of developing a versatile component that can handle data of only two specific types: interface X{ name: string, path: string, type: string, } interface Y{ name: string, path: string, } Both types X a ...

angulartypescript

Guide to developing a personalized useReducer with integrated decision-making and event activation

I am interested in creating a custom hook called useTextProcessor(initialText, props). This hook is designed for managing and manipulating text (string) within a React state. It utilizes useReducer to maintain a cumulative state. Here is the implementation ...

javascriptreactjstypescriptreact-hooks

What causes TypeScript to convert a string literal union type to a string when it is assigned in an object literal?

I am a big fan of string literal union types in TypeScript. Recently, I encountered a situation where I expected the union type to be preserved. Let me illustrate with a simple example: let foo = false; const bar = foo ? 'foo' : 'bar' ...

typescriptunion-types

Webpack 4.1.1 -> The configuration.module contains a property 'loaders' that is unrecognized

After updating my webpack to version 4.1.1, I encountered an error when trying to run it: The configuration object is invalid. Webpack has been initialized with a configuration that does not match the API schema. - The 'loaders' property in ...

javascripttypescriptwebpack

Array filtering using one array condition and additional boolean conditions

Sorting through the carArray based on user-specified conditions. If a user selects the red checkbox, only cars with red paint will be displayed. If a user selects the green checkbox, only cars with green paint will be displayed. If both the red and green ...

javascriptangulartypescript