Change build.js.dev.ts to generate "sourceRoot" property instead of leaving it empty (enable debugging inside IDEA/Webstorm))

[geekrumper]

IMPORTANT: This repository's issues are reserved for feature requests and bug reports. Do not submit support requests here.

Steps to reproduce and a minimal demo of the problem

• checkout current repo with IDEA or Webstorm

What steps should we try in your demo to see the problem?

• create a javascript debug configuration with the Remote URL pointing to typescript sources:

• npm run start
• run the debug configuration and set a breakpoint on a typescript file
• try to trigger the breakpoint by interacting with the browser

Current behavior
Since "sourceRoot" property is empty (from source maps files), IDEA/Webstorm cannot trigger breakpoints set in typescript files.

Expected/desired behavior
task: "build.dev" should fill in the "sourceRoot" property accordingly

Other information
Also check this issue from jetbrains having a proposal for the transpilation process:
https://youtrack.jetbrains.com/issue/WEB-22451

I have tried this proporsal myself but typescript is complaing that "path" cannot be resolved. Since I'm very new to gulp, I uncertain if this mean "APP_DEST" should be of Path or something similar.

If there is an easier way to debug angular-seed inside IDEA/Webstorm, I would like to know. I've tried following configurations without success:

• javascript debug
• nodejs run/debug
• npm run/debug

And yes I know that chrome can handle this, but for me it's not a clean process, to change the environment (chrome dev tools) for debugging.

I've also created an issue at jetbrains for more clarification: https://youtrack.jetbrains.com/issue/IDEA-159932

[mgechev]

@geekrumper thanks for reporting this issue. I'll see if I can take care of it today.

[mgechev]

Having external sourcemaps is quite painful for istanbul and karma...You can enable/disable it for your project; take a look here.

[TomJahncke]

Adding back in the commented out code did not generate the correct sourceRoot in the source map file. The number of "../" in the sourceRoot was doubled + plus one.
Using an example to demonstrate what I am trying to explain: dist/dev/app/about/about.component.js.map "sourceRoot":"../../../../../src/client" (with the solution that is referenced by this thread.)
The result should be:
dist/dev/app/about/about.component.js.map "sourceRoot":"../../../src/client"

I believe the plus one is because relative wants to work with directories rather than files. So instead of using file.path, using file.dirname could address that shortcoming. More importantly the plugin that builds the sourcemap already is putting in the "../" for each directory deep from the root, which is why the "../" are being double in the actual sourceRoot setting in the map file.

If the about objects were nested under another directory, such as screens/about the number of extra "../" double for each layer deeper.

I have modify the logic and now get the correct sourceRoot.

// Use for debugging with Webstorm/IntelliJ
// https://github.com/mgechev/angular2-seed/issues/1220
.pipe(plugins.sourcemaps.write('.', {
includeContent: false,
sourceRoot: (file: any) =>
relative(Config.APP_DEST, Config.PROJECT_ROOT) + '/' + Config.APP_SRC
}))

Through trial and error we realized that we needed ../../ to be added to the source map root and then let the plugin generate the "../" for how nested the js/ts file is. I believe this is because the resulting files are stored into /dist/dev. If someone has more knowledge here and a better explanation of why we needed the ../../ prefix I would be very interested to learn.

@mgechev can you try out this setting for building sourcemaps and see if it is still painful for istanbul and karma.

Thanks,

Tom

[JoMAGon]

@TomJahncke That worked for me also.
Thanks.