continued missing source map debug issues

[lrlarson]

Short description of the problem:

With app-scripts@0.0.38, source maps are not available for debugging in Chrome and Firefox.

What behavior are you expecting?

To see source .ts files for debugging.

Steps to reproduce:

1. Build app with app-scripts@0.0.38 and latest everything
2. Use Ionic Serve to open app in Chrome
   3.Go to dev. tools -- no source map files are available. This was working fine prior to webpack installation. With version app-scripts@0.0.37 source maps are available the right .ts files, but have null as content.

Which @ionic/app-scripts version are you using?
app-scripts@0.0.38

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)
There was a previous issue listed here as closed with version app-scripts@0.0.37, but I a getting this behavior with app-scripts@0.0.38

[danbucholtz]

Published as 0.0.39. I accidentally removed the config when testing out better source maps. Expect to see better source maps drop in 0.0.40.

I'll keep this open to track better source maps.

Thanks,
Dan

[lordgreg]

Even though the source maps are now there, they are transpiled js files, not the original TS files. That being said, not being able to use the correct sources is like not being able to use sourcemaps at all.

Keep up the good work Dan

....waiting for the new, fixed 40 version 👍

[danbucholtz]

@lordgreg, @lrlarson,

This is in master branch right now if you're interested in testing it out. npm link should work.

Thanks,
Dan

[jmesa-sistel]

I'm testing last master code and maps are not well generated, at least using windows.
The map refs are to "webpack:///?????.ts" instead "webpack:///pages/????/????.ts" so we can not link maps with ts files properly.

[radrad]

When main.js.map worked with v 0.0.34 it produced this (shortened version):
{
"version" : 3,
"file" : null,

"../../node_modules/rxjs/util/ObjectUnsubscribedError.js", "../../node_modules/rxjs/SubjectSubscription.js", "../../node_modules/rxjs/Subject.js", "../../node_modules/@angular/core/src/facade/async.js", "../../node_modules/@angular/core/src/zone/ng_zone.js", "../../node_modules/@angular/compiler/src/compiler.js", "../../node_modules/@angular/compiler/src/output/path_util.js", "../../node_modules/@angular/common/src/pipes/index.js", "../../node_modules/@angular/common/src/common_module.js", "../../node_modules/@angular/common/index.js", "../../node_modules/@angular/platform-browser/src/private_import_core.js", 
"../../node_modules/@angular/http/src/http.js", "../../node_modules/@angular/http/src/http_module.js", "../../node_modules/@angular/http/src/index.js", "../../node_modules/@angular/http/index.js", "../../node_modules/ionic-angular/util/util.js", "../../node_modules/ionic-angular/config/config.js", "../../node_modules/ionic-native/dist/esm/index.js", "../../src/pages/home/home.ts", "../../src/pages/about/about.ts", "../../src/pages/contact/contact.ts", "../../src/pages/tabs/tabs.ts", "../../src/app/app.component.ts", "../../src/app/app.module.ts", "../../src/app/main.dev.ts"],
"sourcesContent" : ["export default typeof global !== \"undefined\" ? global :\n            typeof self !== \"undefined\" ? self :\n            typeof window 

So all custom .ts files were included as well as all files in node folder: node_modules
Was it normal to include all files and not only referenced (used) files. But it does contain all custom .ts I use and I am interested in debugging. It would be nice to include .ts from some of the frameworks when I need to debug them for some reason.
Can you explain how sourcemap is structured i.e what should it contain in in what order. I see a lots of code embedded in the sourcemap. What .js is that. And finally I see the mapping AAI,EAAE,IAAI, .... keys at the bottom which is encrypted line numbers mapping I suppose.
I posted about my source map problem here:
https://stackoverflow.com/questions/40356559/debugging-ionic-2-app-using-typescript-source-map-file-not-seen-by-vs-2015-deb
I have 2 projects on my google drive, first of which works (used app-script v 0.0.34) and the second one that doesn't work (v.0.0.36 and 0.0.39)
Rad

[jmesa-sistel]

Tested with 0.0.41 now the maps are found but the breakpoints do not work.
I have open the issue 330 with a very simple test

[TofuDaCat]

Using any of the latest Ionic 2 RC2 starter projects, settings breakpoints don't work out of the box with the 0.0.38 version of ionic-app-scripts.

The 'temporary' workaround I found was to explicitly use version 0.0.34 of ionic-app-scripts, and breakpoints get hit again.

@jmesa-sistel's new opened issue 330 (maybe a dupe to this?) also repro with other Ionic 2 starter projects I've tried as well.

[dbeylkhanov]

same problem =(

ionic cli 2.1.4
ionic-app-scripts v0.0.41

[lordgreg]

So this issue still persists. No sourcemaps what so ever.

ionic-app-scripts 0.0.42.
ionic-cli 2.1.7

Chrome aka Canary:

Firefox:

EDGE

is anyone testing this internally?

[danbucholtz]

@lordgreg, yes we are testing.

When you do a prod build, which it looks like you're doing in the event of firefox above, there are no source maps enabled since it's a prod build. It uses minification, etc.

When you run ionic serve, you are doing a dev build and do have access to source maps.

Here is an example of the default eval source map (which is faster):

You also have the option to override the webpack devtool setting (sourcemap) by setting ionic_source_map to source-map or any other valid Webpack option. That gives a sourcemap that looks like this but a slower build time:

Would love to hear what we could do better, but for now I'm going to close this issue as it appears to be resolved. Please let me know if it's not and we're misunderstanding something.

Thanks,
Dan