打字稿源映射在 vscode 中不起作用

Question

I have a project which is divided in two part.
1.Typescript project with is compiled to a single javascript file.
2.ASP.NET Core website which use the typescript project for user testing.

I am generating sourcemaps with typescript, here is my tsconfig.

{
  "extends": "./../tsconfig.json",
  "compilerOptions": {
    "outFile": "build/app.js",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5",
    "module": "amd"
  },
  "include": [
    "app/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

And file are served this way

    app.UseStaticFiles(new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(Directory.GetCurrentDirectory() + "/../typescriptapp/build"),
        RequestPath = new PathString("/typescriptapp")
    });

When debugging in chrome, it work, I can see all typescripts files. However, when i try to debug in vscode or visualstudio2017, breakpoint are not enabled properly. I would prefer not to copy the whole typescript app into the webapp to avoid editing the wrong file.

I tried changing the "outDir" in the tsconfig, but went i do so Chrome debugging doesn't work because it look for the full path in localhost:43345\\typescriptapp\\C:\\typescriptapp\\app\\app.ts

What am I missing to enable debugging in both vscode and visualstudio2017 while keeping it working in chrome?

Update 21/03/2018 - Added launch.json

{
   "type": "chrome",
   "request": "launch",
   "name": "typescriptapp - chrome",
   "url": "http://localhost:5000",
   "webRoot": "${workspaceFolder}/webapp/wwwroot",
   "sourceMaps": true,
   "trace": true
},
{
    "name": "webapp",
    "type": "coreclr",
    "request": "launch",
    "preLaunchTask": "",
    "program": "${workspaceRoot}/webapp/bin/Debug/netcoreapp2.0/webapp.dll",
    "args": [],
    "cwd": "${workspaceRoot}/webapp",
    "stopAtEntry": false,
    "launchBrowser": {
        "enabled": true,
        "args": "${auto-detect-url}",
        "windows": {
            "command": "cmd.exe",
            "args": "/C start ${auto-detect-url}"
        },
        "osx": {
            "command": "open"
        },
        "linux": {
            "command": "xdg-open"
        }
    },
    "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
    },
    "sourceFileMap": {
        "/Views": "${workspaceRoot}/webapp/Views"
    }
}

Thanks

Answer 1

Thanks @Aviad Hadad pointed me on the right track.

I tried changing the vscode launch settings to "webRoot": "${workspaceFolder}\\..\\typescriptapp\\build" and it was possible to debug my typescript project. However I could not debug wepapp file this way.

My solution was to keep this "webRoot":"${workspaceFolder}/webapp/wwwroot" but I added a step in my build process which compile my project a second time in my webapp.

tsc -p '.\typescriptapp\tsconfig.json' --outFile .\webapp\wwwroot\js\typescriptapp\typescriptapp.js;

This way, sourcemaps are mapped properly for vscode. I had to change a bit static files served so it can work with chrome.

  app.UseStaticFiles(new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(Directory.GetCurrentDirectory() + "/../typescriptapp"),
        RequestPath = new PathString("/typescriptapp")
    });

Answer 2

I faced same issue. however it resolved when used inline source maps. Maybe it can work with you as well.