2

I have an asp.Net Core application with AngularJS code with the following task in gulpfile.js:

gulp.task("concat_app:js", function () {
    return gulp.src(js_app, { base: 'wwwroot/' })
        .pipe(sourcemaps.init({
            loadMaps: true,
            identityMap: true,
            largeFile: true
        }))
        .pipe(concat(paths.js_app_dest))
        .pipe(sourcemaps.write('.', {
            includeContent: false,
            mapSources: function (sourcePath, file) {
                return '../' + sourcePath;
            }
        }))
        .pipe(gulp.dest("."));
});

If I try to debug in chrome everything is working fine and also my folder structure is correct: structure in chrome developer tools

But when I try to debug in Visual Studio 2017, it seems not to be correctly mapped, because when I set a breakpoint, it appears in other files. I have tried the same using a tsconfig.json:

{
  "compileOnSave": true,
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "outFile": "wwwroot/js/app.js"
  },
  "include": [
    "wwwroot/ngApp/*.js",
    "wwwroot/ngApp/**/*.js"
  ],
  "exclude": []
}

This generates a mapfile like this:

{
  "version": 3,
  "file": "app.js",
  "sourceRoot": "",
  "sources": [ "../ngApp/_app.js", "../ngApp/_config/appConfig.js" "..." ],
  "names": [],
  "mappings": "AAAA,CAAC;IACG,YAAY,..."
}

Here also it seems to be mapped somehow wrong, I set a breakpoint, it appears somewhere else. Also my webapplication is stopped, but I can't continue in Visual Studio.

I would prefer to use gulp-sourcemaps, but I had a hard time setting the right directory. Can this be a part of the problem, because my gulpfile.js is not located in the wwwroot-folder? project in visual studio

EDIT: It seems when using tsconfig the breakpoint is always set in the first file (_app.js). What am I missing here?

0 Answers0