Investigating TypeScript Bugs in Visual Studio Code

As I navigate through various sources, I notice that there is a plethora of information available on older versions of VSCode (v1.16.1 - the most recent version at the time of writing) or deprecated attributes in the launch.json file.

I have experimented with different configuration attributes, referring to some outdated discussions on GitHub forums (many of which are no longer applicable due to deprecated attributes). My goal is to debug and set breakpoints directly within the Typescript code in VSCode.

Below is the contents of my tsconfig.json file:

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

And this is how my launch.json file for Visual Studio Code looks like:

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": "Launch Chrome",
          "type": "chrome",
          "request": "launch",
          "url": "http://localhost:3000/",
          "sourceMaps": true,
          "trace": true,
          "webRoot": "${workspaceRoot}/src",
          "userDataDir": "${workspaceRoot}/.vscode/chrome",
          "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
          }
      }
  ]
}

When I try to open Chrome, it displays the standard "...refused connection" page: https://i.stack.imgur.com/P0SMO.png

My current focus is debugging a typical "admin template". Running it through the terminal using ng serve works perfectly fine for me.

However, debugging this Angular application proves to be challenging. It's important to mention that I am fairly new to Angular, Typescript, and VSCode in general.

angulartypescriptvisual-studio-code

Answer №1

Have you attempted to define the outFiles attribute in your configuration like this: 

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceRoot}/out/**/*.js"
            ]
        }
    ]
}

As stated in these documentation, setting "sourceMaps": true informs vscode to associate the generated *.js with the corresponding *.ts files. Additionally, you must specify the outFiles attribute to indicate to vscode where it should search for those *.js files if they are located in a different directory.

Quoting from the documentation:

If the transpiled JavaScript files are not located alongside their source files but in a separate folder, you need to guide the VS Code debugger in finding them by setting the outFiles attribute.

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

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

javascriptcssangulartypescript

What's the process for deducing the default generic parameter from a function type?

Is there a way to extract the default type parameter of a function in order to make this statement compile successfully? const fails: string = "" as ReturnType<<T = string>() => T>; ...

typescript

Schedule - the information list is not visible on the calendar

I am trying to create a timeline that loads all data and events from a datasource. I have been using a dev extreme component for this purpose, but unfortunately, the events are not displaying on the calendar. Can anyone offer any insights into what I might ...

javascriptangulartypescriptdevextreme

The server is not allowing the requested method through HTTP POST and therefore returning

Excuse me if this question sounds beginner or if my terminology is incorrect, because I am new to this. I have created a basic Python API for reading and writing to a database (CSV file) with Angular 5 as my front end. While I was able to successfully ret ...

angulartypescripthttppost

Differentiating elements from two array objects in typescript: a guide

I am facing an issue in extracting the different elements from two array objects. Here is my example: array1 = [{id: 1, a: "a", b: "b"}, {id: 2, c: "c", d: "d"}, {id: 3, e: "e", f: "f"}]; array2 = ...

arraystypescriptobject

Determine whether something has the potential to be a string in TypeScript

I am looking to create a TypeScript type that can identify whether an element has the potential to be a string. This means the element should have the type "string" or "any", but not "number", "boolean", "number[]", "Person", etc. I have experimented wit ...

typescripttypesconditional-statements

How to programmatically close an Angular 5 Modal

In my current project, I am working with Angular 5. One of the functionalities I have implemented is a modal window. The HTML structure for this modal looks like this: <div class="add-popup modal fade" #noteModal id="noteModal" tabindex="-1" role="dia ...

typescriptmodal-dialogangular5

Set the parameter as optional when the type is null or undefined

I need to create a function that can take a route and an optional set of parameters, replacing placeholders in the route with the given params. The parameters should match the placeholders in the route, and if there are no placeholders, the params should b ...

typescripttypescript-generics

What steps should be taken to resolve the error message "This Expression is not constructable"?

I'm trying to import a JavaScript class into TypeScript, but I keep getting the error message This expression is not constructable.. The TypeScript compiler also indicates that A does not have a constructor signature. Can anyone help me figure out how ...

javascripttypescriptclassimport

Issue with Angular project: View not being updated when using behaviorSubjects

Within my Angular project, I am retrieving data from an API using a service and storing the data within a BehaviorSubject as shown below private categorySubject = new BehaviorSubject<number | null>(null); apiBehavior = new ReplaySubject<ApiRes ...

angulartypescriptsystem.reactive

Unlock the power of Env variables on both server and client components with Next.js! Learn how to seamlessly integrate these

In my Next.js app directory, I am facing the need to send emails using Nodemailer, which requires server-side components due to restrictions on client-side sending. Additionally, I am utilizing TypeScript in this project and encountering challenges when tr ...

typescriptnext.jsnext.js13react-server-components

What exactly does RouteComponentProps entail?

While exploring information on React, I came across the term RouteComponentProps. For example: import { RouteComponentProps } from 'react-router-dom'; const ~~~: React.FC<RouteComponentProps> and class BookingSiteOverview extends React.Com ...

reactjstypescriptreact-router

Error: Unable to execute function abc, it is not defined as a function in this context

Having trouble with a fronted or JavaScript issue where it can't find the defined function in the file. I'm working on integrating Apple Pay and need to call the back-end API based on a specific event. Here is my code. ACC.payDirect = { _autoload ...

javascriptjquerytypescript

Creating web components with lit-element, leveraging rollup, postcss, and the tailwind framework for packaging

I have been attempting to package a functional web component that was developed using the lit-element/lit-html with the tailwind framework utilizing the postcss plugin from the rollup packager. Upon conducting a rollup, I discovered the compiled js and ht ...

typescriptrollupjspostcsstailwind-csslit-element

What is the best way to verify a function that produces multiple outcomes?

I have a scenario where an effect returns first action A and then action B @Effect() myCustomEffect$: Observable <Action> = this.actions$ .ofType('CUSTOM_ACTION') .switchMap(() => Observable.of( // notifying subscribers about a ...

angularreduxrxjsngrxngrx-effects

What is the best way to handle installing peer dependencies when using Angular CLI?

Every time I try to update my Angular CLI and NPM, I get stuck in a cycle of errors. After updating, I receive WARN messages instructing me to install peer dependencies (listed below). However, when I try to install these dependencies, more WARN messages a ...

angulardependenciesangular-clinpm-install

"Ionic Calendar 2 - The ultimate tool for organizing your

I am using a calendar in my Ionic app that retrieves events from a database through an API. var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://portalemme2.com.br/SaoJoseAPI/agenda', true); this.http.get('http://portalemme2.c ...

arraysangulartypescriptionic-frameworkcalendar

Is there a way to view Deno's transpiled JavaScript code while coding in TypeScript?

As I dive into Typescript with Deno, I am curious about how to view the JavaScript result. Are there any command line options that I may have overlooked in the documentation? P.S. I understand that Deno does not require a compilation step, but ultimately ...

javascripttypescriptdeno

Typescript React: Implementing type definitions for JSS classes object

Here is the react code I am working with: import React from 'react'; import withStyles from "react-jss"; const styles = { box: { border: "2px solid #000" } }; interface ComponentProps {} class Welcom ...

reactjstypescriptreact-typescriptjss

Modifying the PHP syntax highlighting in Visual Studio Code

Is it possible to customize the color of PHP opening and closing tags in Visual Studio Code? The current theme I have (Cobalt3) displays them in white, but I'm looking for a more distinctive color. I would greatly appreciate your assistance with thi ...

phpvisual-studio-codesettings