Typescript systemjs-builder bundle sourcemaps

[xealot]

@guybedford I'm really sorry about the ticket spam, #681 seemed close to the issue I'm having but I'm really not sure.

My project:

• typescript
• src/dist split
• uses npm
• hand managed systemjs config

My build:

• invoke plain tsc with tsconfig with enabled sourcemaps and es5/commonjs output
• use custom developed systemjs config (works awesome)
• run builder.build() with sourceMaps enabled

The bundling step works great but I'm left with two trees of sources from sourcemaps.

One for generated JS source from Typescript (that doesn't work with breakpoints) and one for original TS files (which does work with breakpoints).

The reason for so many entries is because build() seems to merge the existing sourcemap definitions with newly generated sourcemaps from the intermediate files.

"sources":["app/navigation/global-menu.component.js","../../src/client/app/navigation/global-menu.component.ts"...

How can I get System builder to pull the sourcemaps forward with the new translation but not create new intermediate sourcemap spam?

I read in your other thread a suggestion to use the typescript plugin for systemjs, but this seems sub-optimal since I don't really want to compile the code in the browser and duplicate the TS config.

[guybedford]

This does seem like a bug to ensure we support picking up existing sourcemaps properly.

[jp7677]

@xealot You could consider using gulp-typescript and gulp-sourcemaps for the typescript compilation. gulp-sourcemaps allows you to completely redefine the source path within the sourcemaps. See eg https://github.com/jp7677/hellocoreclr/blob/aurelia/ui/build/bundle/tscompile.js. That way I was able to keep the mapping correctly to the original typescript files.

[reppners]

Having the same issue where src and compiled output are split. When I want to apply a SourceMapConsumer for a stacktrace it can't resolve the sourcemap because the paths are off.

"src/utils/error/StError.ts" is not in the SourceMap.

Example:

Source file at

src/utils/error/StError.ts

compiles to

tmp-out/utils/error/StError.js

tmp-out/utils/error/StError.js.map
{
  "version": 3,
  "file": "StError.js",
  "sourceRoot": "",
  "sources": [ "../../../src/utils/error/StError.ts" ],
  "names": [],
  "mappings": "..."
}

bundles to

dist/bundled.min.js

dist/bundled.min.js.map
{
  "version": 3,
  "file": "StError.js",
  "sourceRoot": "",
  "sources": [
    ...
    "../src/utils/error/StError.ts",
    ...
  ],
  "names": [],
  "mappings": "..."
}

Is there anything I can do about this? Is this regarded a bug or am I doing it wrong? If I just use Chrome with the sourcemap to inspect it everything seems to be fine but using mozillas SourceMapConsumer throws the error.

Applied code

var loc = mapConsumer.originalPositionFor({
  line: stackframe.lineNumber,
  column: stackframe.columnNumber
});

try {
  // loc.source is "src/utils/error/StError.ts" but sourcemap lists it as "../src/utils/error/StError.ts"
  var mappedSource = mapConsumer.sourceContentFor(loc.source);
}
catch(e){
  // throws  "src/utils/error/StError.ts" is not in the SourceMap.
}

[thomas-darling]

Any news on this, @guybedford?

[guybedford]

If anyone is interested in looking into this, I'll gladly review.

[thomas-darling]

This might be related: #823