2

I think the picture 1 below will explain the best the issue I am facing

I created Ionic2 app on my Windows 10 PC with this command: ionic start -a "myapp" -i com.mycomp.myapp --v2 sidemenu

I then imported it in Visual Studio 2015 with TACO installed. I added ios platform and attached my iPad 2 air to my mac connected to wifi. In tsconfig.json I added "sourceMap": true to enable .ts debugging.

Picture 1: Picture 1

I am not sure how to see network trafic when using VS 2015 (I could not fine any tab showing it) so in the second picture you can see the results of Safari web inspector page that shows loaded .html, .css and .js files.

I believe that I should see some file(s) with .js.map extension that from my earlier experienfe Chrome browser uses to enable .ts debugging. Is this my problem. How to get it to appear? In the first picture you can see that main.js.map was built, but

Picture 2 shows Web Inspector view of IPad Index.html from my app deployed and running. Network tab opened. You can see no main.js.map is served. enter image description here

Picture 3 shows Web Inspecto, Resources tab. YOu can see that under main.js there is page2.ts (I guess ready to connect to main.js.map IF IT IS SERVED SOMEHOW. enter image description here

And finally Picture 4 show Ipa Payload content unzipped that shows the presence of main.js.map. So it is deployed but how can VS 2015 see it in debugging mode. Also Safari could not break into page2.ts obviously because it also couldn't obtain main.js.map file enter image description here

Let me know If you see something wrong and explain how is .map file loaded by a debugging engine like VS 2015 and Chrome and Safari browsers?

Thanks, Rad

Rad
  • 933
  • 1
  • 15
  • 32
  • This document shared information about how Source Maps generated in Chrome and debug the TypeScript: http://www.gamefromscratch.com/post/2014/05/27/TypeScript-debugging-in-Visual-Studio-with-IE-Chrome-and-Firefox-using-Source-Maps.aspx, but it seems that source-mapping is enabled by default in Safari. – Jack Zhai Nov 01 '16 at 11:52
  • I have these settings in tsconfig.json. "module": "es2015", "moduleResolution": "node", "target": "es5" that is what sidemenu template creates. I tried adding "inlineSourceMap": true, "inlineSources": true but this thing inlined source map in *.ts files. – Rad Nov 01 '16 at 16:39
  • I noticed one thing. Inside main.js.map there is only one .ts file (/src/pages/page2/page2.ts). But where are other *.ts files: page1.ts, app.component.ts, app.module.ts? – Rad Nov 01 '16 at 16:43
  • Could you share a sample Ionic2 app here? I will try debug it in my side to check whether this issue related to VS itself or the Ionic2 app project template in VS, since the Ionic2 still a beta version. – Weiwei Nov 02 '16 at 09:30
  • Here is my Visual Studio 2015 Taco Ionic 2 sample project (really just a starter project from sidemenu template. https://drive.google.com/open?id=0B1I1nQTGClv3OUowWDlpX1g4blU – Rad Nov 04 '16 at 07:22
  • Note that I commented out 2 things I added to config.xml file based on this workaround (https://dpogue.ca/articles/cordova-xcode8.html). Now that Cordova-iOS 4.3.0 is released I think I need to exclude this workaround. Anyway I tried that as well and it doesn't work. Interestingly when an earlier solution I also created with Ionic 2 does work. It is here. https://drive.google.com/open?id=0B1I1nQTGClv3LWRWRV9yVGVaWGM So I really don't see a big difference in build configuration. – Rad Nov 04 '16 at 07:38
  • I created much shorter version of this here: https://stackoverflow.com/questions/40372684/ionic-2-debugging-typescript-files-using-source-maps – Rad Nov 04 '16 at 07:39
  • My second problem is when I update my .ts or html code and do another debug/build it is not propagated to the device. Do I have some kind of build caching going on? This is frustrating as I cannot proceed with my development. – Rad Nov 04 '16 at 07:43
  • Do you get any output messages in the VS output window during you build or debug the app? – Jack Zhai Nov 07 '16 at 02:08

0 Answers0