Typescript + Gulp + Sourcemaps wrong source path

Question

I have a nodejs app with the following folder structure:

project
|-- src/
|   |-- controllers/
|   |   |`-- authorize-controller.ts
|   |`-- index.ts
|--dist/
|   |--controllers/
|   |   |`-- authorize-controller.js
|   |   |`-- authorize-controller.js.map
|   |`-- index.js
|   |`-- index.js.map
`-- gulpfile.js
`-- tsconfig.json

The sourcemaps are generated. The index.js.map points to "../src/index.ts" (correct). The corresponding content of the map file is {"version":3,"sources":["../src/index.ts"],"names":[],"mappings"

But the dist\controllers\authorize-controller.js.map points to the wrong directory. It has {"version":3,"sources":["../src/controllers/authentication.controller.ts"],"names":[],. There is one ../ missing.

My gulpfile.js is:

gulp.task('compile', () => {
   var tsResult = tsProject.src()
     .pipe(sourcemaps.init())
     .pipe(tsProject());

   return tsResult.js
     .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '/src' }))
     .pipe(gulp.dest('dist'));
});

My tsconfig.json is:

{
   "compilerOptions": {
      "module": "commonjs",
      "target": "es6",
      "noImplicitAny": false,
      "sourceMap": true,
      "outDir": "dist"
   },
   "include": [
      "src/**/*.ts"
   ],
   "exclude": [
      "node_modules",
      "dist",
      ".vscode"
   ]
}

What am I doing wrong? It seems the sourceRoot is ignored by gulp-sourcemaps.

Answer 1

Ok I found a solution to get the breakpoints hit. I looked on the wrong part of the sourcefile. "sources":["../src/controllers/authentication.controller.ts"] is always the same and can be ignored. If I change the gulp task to use sourceRoot: '../src' it works. At the end of the sourcemap-file, the sourceRoot is set.

This is my new gulp task:

gulp.task('compile', () => {
   var tsResult = tsProject.src()
      .pipe(sourcemaps.init())
      .pipe(tsProject());

   return tsResult.js
      .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../src' }))
      .pipe(gulp.dest('dist'));
});

Answer 2

My source files are located at "src" folder at the project root folder and all output with corresponding folder structure goes into "dist" folder similar to yours. Here is my "compile" task that I think can help you :

var gulp = require("gulp");
var tsc  = require("gulp-typescript");
var sourcemaps = require('gulp-sourcemaps');

        gulp.task("compile", function () {
      var tsProject = tsc.createProject('tsconfig.json');
      return gulp
        .src("src/**/*.ts") 
        .pipe(sourcemaps.init())
        .pipe(tsProject())
        .pipe(sourcemaps.write(
          ".",
        {   
          sourceRoot: function(file) {
            var filePathSplit = file.sourceMap.file.split("/");
            var backTrack = '../'.repeat(filePathSplit.length-1) || '../' ;
            var filePath = backTrack+ "src/";
          return filePath;
        }}
         ))
        .pipe(gulp.dest("dist"));
    });

Hope this will help.