Debug bundled JavaScript file in Visual Studio 2017 with gulp-sourcemaps - visual-studio-2017

Question

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?