systemjs: Debug + Sourcemaps not working in Node with TypeScript

Hi all,

I am using SystemJS (I’m running v0.19.26) to load and transpile TypeScript code to run in Node. All well and good. Now I wish to debug the code with break-points etc. As I step into TypeScript code, it only shows the transpiled version - ignoring the source-mapping - and thus not showing me the original TypeScript.

I have tried this with the built-in typescript transpiler, the plugin-typescript loader, etc. All resources on the internet talk about this working in the browser, but no one seems to be doing this in NodeJS land.

I have tried this using a number of different debuggers (node-inspector, Visual Studio Code, WebStorm), so I’m confident it’s not an issue there.

To illustrate my set-up, I have my main file I launch from:

var System = require('systemjs')
global.ts = require('typescript')

System.transpiler = 'typescript'
System.config({
  typescriptOptions: {
    sourceMap: true
  }
}) // Setting this seems to be optional as source-maps seem to be generated by default...

System.import('./src/test.ts').then(function(m) {
  m.default()
})

Or to see the plugin-typescript version (which I used JSPM to set-up):

var System = require('systemjs')

SystemJS.config({
  transpiler: "plugin-typescript",
  paths: {
    "github:*": "./jspm_packages/github/*",
    "npm:*": "./jspm_packages/npm/*"
  }
});

SystemJS.config({
  packageConfigPaths: [
    "github:*/*.json",
    "npm:@*/*.json",
    "npm:*.json"
  ],
  map: {
    "os": "github:jspm/nodelibs-os@0.2.0-alpha",
    "plugin-typescript": "github:frankwallis/plugin-typescript@4.0.5"
  },
  packages: {
    "github:frankwallis/plugin-typescript@4.0.5": {
      "map": {
        "typescript": "npm:typescript@1.8.10"
      }
    },
    "github:jspm/nodelibs-os@0.2.0-alpha": {
      "map": {
        "os-browserify": "npm:os-browserify@0.2.1"
      }
    }
  }
});

System.import('./src/test.ts').then(function(m) {
  m.default()
})

With my test.ts looking like:

export default function() {
  console.log('HI')
}

If I set a break-point in the default function in test.ts it never breaks, so if instead I set it on the import callback and step into m.default() it shows the transpiled code, and not the source TypeScript.

I’ve checked the various transpilers, and both do generate source-map information, but it doesn’t seem to hook-up the actual typescript source.

Please help! I’ve been tearing my hair out.