VSCode breakpoint not working in typescript with sourcemap generated by gulp-sourcemaps

Question

I have a typescript file users.ts in a sub-directory routes.

The gulp code in gulpfile.js:

var tsProject = ts.createProject(tsConfigFile);
return tsProject.src()
    .pipe(sourcemaps.init())
    .pipe(ts(tsProject))
    .js
    .pipe(sourcemaps.write('.', {includeContent: false, sourceRoot: ''})) 
    .pipe(gulp.dest('.'));

The sourcemap generated by gulp-sourcemaps does not work with VSCode :

{"version":3,"sources":["routes/users.ts"],"names":[], "mappings":"...","file":"routes/users.js","sourceRoot":""}

The sourcemap generated by tsc works fine in VSCode:

{"version":3,"file":"users.js","sourceRoot":"","sources":["users.ts"],"names":[], "mappings":"..."}

and the VSCode breakpoint works fine with the sourcemap generated by tsc.

So how to config gulp-typescript/gulp-sourcemaps to generate the same sourcemap as tsc?

Answer 1

It is the same problem as in Gulp Typescript + Browserify; Bundled sourcemap points to transpiled JS rather than source TS
Add sourceRoot function to sourcemaps.write(...)
Assuming your .ts files are in src folder of the project, sourcemaps pipe will look like:

.pipe(sourcemaps.write('.', {
           sourceRoot: function(file){ return file.cwd + '/src'; }
      }))