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.

der_chirurg · Accepted Answer · 2017-02-17 07:37:52Z

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'));
});

answered Feb 17, 2017 at 7:37

der_chirurg

1,5632 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Namig Hajiyev · Accepted Answer · 2017-10-02 07:16:17Z

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.

Collectives™ on Stack Overflow

Typescript + Gulp + Sourcemaps wrong source path

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related