Having trouble halting the execution at specific checkpoints within an asp.net core project containing an angular 8.0 application located in a subfolder named ClientApp

Encountering difficulties stopping at breakpoints in an asp.net core project with an angular 8.0 app located in a subfolder within ClientApp. The app I need to set a breakpoint in is located at clientapp\apps\microsympan\app\src\app\app.component.ts.

When running in Visual Studio Code with the following settings in launch.json:

"webRoot": "${workspaceFolder}/apps/microsympan/app"

I am able to set and hit breakpoints.

In Visual Studio, I have made the following settings: 1) In Startup.cs:

app.UseSpa(spa => {
        spa.Options.SourcePath = "ClientApp/apps/microsympan/app";
        if (env.IsDevelopment()) { spa.UseAngularCliServer(npmScript: "start microsympan") }
      });

2) In the csproj file:

clientapp\apps\microsympan\app

However, I am unable to set breakpoints in Visual Studio, except when set in Chrome. Is this a bug, a configuration issue, or is there a solution?

Thank you in advance.

javascriptc#angulartypescriptasp.net-core

Answer №1

To successfully debug TypeScript code in Visual Studio, you need to set it up as it is not enabled by default.

For detailed instructions, you can refer to the resources here and here.

Follow these steps to configure source maps using a tsconfig.json file:

If you add a tsconfig.json file to your project, Visual Studio will recognize the directory as a TypeScript project. Right-click on your project in Solution Explorer, then choose Add > New Item > Web > Scripts > TypeScript JSON Configuration File. The tsconfig.json file will be added to your project with the following content:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Compiler options available for tsconfig.json:

  • inlineSourceMap: Generates a single file with source maps instead of creating separate maps for each file.
  • inlineSources: Includes source code alongside the source maps in a single file, requires inlineSourceMap or sourceMap.
  • mapRoot: Specifies the location where the debugger should find source map files instead of the default location.
  • sourceMap: Generates a .map file for debugging.
  • sourceRoot: Specifies the location for the debugger to find TypeScript files (opposed to source locations).

To configure source maps using project settings:

Right-click on the project and navigate to Project > Properties > TypeScript Build > Debugging.

Project settings include:

  • Generate source maps: Creates corresponding .map files.
  • Specify root directory of source maps: Defines the location for the debugger to find map files.
  • Specify root directory of TypeScript files: Indicates where the debugger should find TypeScript files.

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

Using AJAX to send data from knockout observables to the server in JSON format

I'm currently facing an issue where I am trying to send form fields that are linked to specific observables to my server as a JSON object, but I keep receiving an empty JSON string on the server side. I want to avoid sending the entire view model just ...

javascriptjqueryajaxjsonknockout.js

What is the best way to implement the populate method in Node.js when working with MongoDB?

Here is the code snippet I am working with: const Order = require('../../models/order'); const Product = require('../../models/product'); Order.find({}, '_id product quantity', function(err, result) { if (result) { con ...

javascriptnode.jsmongodbapiexpress

I am encountering an error stating "Cannot locate module 'nestjs/common' or its related type declarations."

I am currently working on a controller in NestJS located in the file auth.controller.ts. import { Controller } from 'nestjs/common'; @Controller() export class AppController {} However, I encountered an error that says: Error TS2307: Cannot fin ...

javascripttypescriptnestjs

What is the reason for not being able to locate the controller of the necessary directive within AngularJS?

A couple of angularjs directives were written, with one being nested inside the other. Here are the scripts for the directives: module.directive('foo', [ '$log', function($log) { return { restrict: 'E', r ...

javascriptangularjsangularjs-directive

The $scope.eval feature in Angular 4 allows for dynamic evaluation

During the era of Angular, we utilized this framework to develop a specialized application for one of our clients. In simple terms, the application was designed to create dynamic questions and answers, even intricate ones, with specific display and validat ...

angular

Enhancing Transparency of WMS Layers in OpenLayers

I need help figuring out how to add transparency to a WMS layer in openlayers. Here is the current javascript code for a non-transparent layer: var lyr_GDPSETAAirtemperatureC = new ol.layer.Tile({ source: new ol.source.TileWMS(({ ...

javascripthtmlopenlayerswms

What is the best way to create a shared protobuf message that can be utilized by various C# NuGet packages?

In my quest to establish a shared protobuf message that can be utilized by multiple C# NuGets, resembling a message header of sorts. The common proto files are stored in a separate repository and included as a submodule in the respective C# NuGet reposit ...

c#.netprotocol-buffers

Modified the imports within Angular Material

I recently began developing a new website using Angular 9 and Angular Material. Initially, this code snippet worked fine: import {MatSidenavModule, MatToolbarModule} from '@angular/material'; However, I encountered an error that prompted me to u ...

angularangular-material

Executing NodeJS awaits in the incorrect order - When using Express with SQLite3's db.all and db.run, one await is prioritized over the other

Need help running asynchronous functions in .exports, getting promises, and using the results in subsequent async functions. Despite using awaits, the second function seems to execute before the first one. sales.js = const sqlite3 = require('sqlite ...

javascriptnode.jsexpresssqlite

Integrate functionality to track elapsed hours in stopwatch timer

Struggling to incorporate hours into my JS Stopwatch timer, the math for calculating the hours section is proving difficult. This is what I have so far, but I suspect the issue lies within the h variable. function formatTime(time) { var h = m = s = ...

javascripttimer

The width of an HTML input and button elements do not match

Currently, I am facing an unusual issue where my input and button tags seem to have the same width assigned to them (width: 341.5px; calculated from $(window).width() / 4) in the code, but visually they appear to be of different widths. Here is a visual re ...

javascriptjqueryhtmlcss

Unable to reach the prototype of the object

I am encountering an issue while attempting to access the object's prototype in a Node.js code. The objective is to send this object through an API so that users can utilize its methods. The problem lies in the fact that the returned object only inclu ...

javascriptnode.jsexpressjavascript-objects

Proper procedures for effectively deleting records from a database

While attempting to delete records from the database in our web API, I encountered an error stating "System.InvalidOperationException: There is already an open DataReader associated with this Connection which must be closed first". The method body is as fo ...

c#mysqlasp.net.netentity-framework

Accessing data from another domain using JavaScript with Cross-Origin Resource Sharing (

After researching various CORS and JSON request discussions, I find myself puzzled as to why the first script functions correctly while the second one does not. I am eager to enhance my understanding of CORS, Javascript, XMLHTTPRequest2, and AJAX. The fol ...

javascriptajaxjsonxmlhttprequestcors

"Effortlessly rearrange and remove specific elements using jQuery UI's drag-and-drop

Hello everyone, I have designed a simple interface with 3 different "zones". The first zone contains a list of elements that the user possesses, the second zone allows the user to drag and sort these elements, and the third zone enables the user to delete ...

javascriptjqueryjquery-uidraggabledroppable

What could be causing the "no such file" error to occur while attempting to use the "mammoth" tool to convert a basic .docx file?

Here is my code snippet. The file contains a basic "hello world" and I have the hello.docx file located in the same directory where I am running this mammoth function. Error message: fatal Error: ENOENT: no such file or directory, open './hello.docx& ...

javascriptnode.jsmammoth

What is the best way to determine which id has been clicked using jQuery?

Can someone help me figure out how to determine which button has been clicked using jQuery? Here is the HTML code I am working with: <div class="row"> <div class="col-md-6"> <div class="well " id="option_a"> </div& ...

javascriptjqueryhtmltwitter-bootstrap

Creating dynamic axes and series in Ext JS 4 on the fly

I am looking to dynamically generate the Y axis based on a JSON response. For example: { "totalCount":"4", "data":[ {"asOfDate":"12-JAN-14","eventA":"575","eventB":"16","eventC":"13",...}, {"asOfDate":"13-JAN-14","eventA":"234","eventB":"46","even ...

javascriptjsonextjslinechart

Variable scope not properly maintained when there is a change in the Firebase promise

I am currently working on developing a controller function to handle signup submissions using Firebase. However, I've encountered an issue where the variables within the scope (controllerAs: $reg) do not seem to update correctly when modified inside a ...

javascriptangularjsfirebasefirebase-authentication

Creating a link button using JavaScript

I have integrated a Setmore code on my website to facilitate appointment booking, which triggers a popup similar to what you would see on a hotel reservation site. <script id="setmore_script" type="text/javascript" src="https://my.setmore.com/js/iframe ...

javascripthtmlcss