Unable to stop at any breakpoint in a asp.net core project with angular 8.0 app in subfolder inside ClientApp

Question

Unable to stop at any breakpoint in a asp.net core project with angular 8.0 app in subfolder inside ClientApp The folder structure is: https://i.stack.imgur.com/SIMcy.png

The app i want to set breakpoint is in clientapp\apps\microsympan\app\src\app\app.component.ts

If i run with visual studio code and set the launch,json as: "webRoot": "${workspaceFolder}/apps/microsympan/app" I can set breakpoints and hitted

In visual studio I had set 1) in Startup.cs

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

2) in csproj clientapp\apps\microsympan\app

But no luck. except if I set the breakpoint in Chrome then is hitted and shows a file replica in visual studio, but i cant set the breakponit in Visual Studio and gets hitted.

Is this a Bug / luck of config variable or there is a solution?

Thanks in advance

How can I tell to Visual Studio that the Angular project folder is inside ClientApp but 3 folders deeper (ClientApp/apps/microsympan/app) ? Please look at structure [here](https://i.stack.imgur.com/SIMcy.png) — user2310540, Jul 26 '19 at 12:53

Tony Ngo · Answer 1 · 2019-07-25T13:38:04.460

You have to setup for your visual studio to debug TS code. By default Visual studio will not enable for you

You can take a look here and here.

Small step to step up

Configure source maps using a tsconfig.json file If you add a tsconfig.json file to your project, Visual Studio treats the directory root as a TypeScript project. To add the file, right-click your project in Solution Explorer, and then choose Add > New Item > Web > Scripts > TypeScript JSON Configuration File. A tsconfig.json file like the following gets added to your project.

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

Compiler options for tsconfig.json

inlineSourceMap: Emit a single file with source maps instead of creating a separate source map for each source file.
inlineSources: Emit the source alongside the source maps within a single file; requires inlineSourceMap or sourceMap to be set.
mapRoot: Specifies the location where the debugger should find source map (.map) files instead of the default location. Use this flag if the run-time .map files need to be in a different location than the .js files. The location specified is embedded in the source map to direct the debugger to the location of the .map files.
sourceMap: Generates a corresponding .map file.
sourceRoot: Specifies the location where the debugger should find TypeScript files instead of the source locations. Use this flag if the run-time sources need to be in a different location than the location at design-time. The location specified is embedded in the source map to direct the debugger to where the source files are located.

Configure source maps using project settings You can also configure the source map settings using project properties by right-clicking the project and then choosing

Project > Properties > TypeScript Build > Debugging.

These project settings are available.

Generate source maps (equivalent to sourceMap in tsconfig.json): Generates corresponding .map file.
Specify root directory of source maps (equivalent to mapRoot in tsconfig.json): Specifies the location where the debugger should find map files instead of the generated locations. Use this flag if the run-time .map files need to be located in a different location than the .js files. The location specified is embedded in the source map to direct the debugger to where the map files are located.
Specify root directory of TypeScript files (equivalent to sourceRoot in tsconfig.json): Specifies the location where the debugger should find TypeScript files instead of source locations. Use this flag if the run-time source files need to be in a different location than the location at design-time. The location specified is embedded in the source map to direct the debugger to where the source files are located.

Thanks for your answer, but I haven't the problem you describe. I have a running project which I can debug properly. As the project gets bigger i decided to use a monorepo approach using nx.dev with all projects in the same root folder and repository, But now I can't debug, because of folder structure change. and i tried anything, but i can't figure out the configuration the VisualStudio wants. — user2310540, Jul 26 '19 at 08:30
You can use visual studio code or angular ide to debug. I'm not a big fan of visual studio when coming to client side debug :D — Tony Ngo, Jul 26 '19 at 08:36

Unable to stop at any breakpoint in a asp.net core project with angular 8.0 app in subfolder inside ClientApp

1 Answers1