Source maps are not available in a real Android device using Chrome DevTools

[xmellado]

Short description of the problem:

I cannot debug TypeScript sources on a real Android device using "ionic_source_map_type": "source-map" in my packages.json file. Only using "ionic_source_map_type": "#inline-source-map" Chrome DevTools finds source maps, but this type of source map is not supported by Ionic Team as explained here in issue #740 and --prod fails when used to build the release version.

What behavior are you expecting?

Either Chrome DevTools showing source maps in a real Android device using "ionic_source_map_type": "source-map", or support "ionic_source_map_type": "#inline-source-map" in production.

Steps to reproduce:

1. Create an empty project with ionic start --v2 myApp tabs.
2. Set "ionic_source_map_type": "source-map" as source map type in package.config. See below.
3. Build with ionic run android.
4. Use Chrome DevTools to access the WebView in the mobile device. Source maps are not available.

My package.config:

{
  "name": "JustToday",
  "author": "Incubapps",
  "homepage": "http://www.justtoday.com",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "2.4.8",
    "@angular/compiler": "2.4.8",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "2.4.8",
    "@angular/forms": "2.4.8",
    "@angular/http": "2.4.8",
    "@angular/platform-browser": "2.4.8",
    "@angular/platform-browser-dynamic": "2.4.8",
    "@angular/platform-server": "2.4.8",
    "@ionic/storage": "2.0.0",
    "@ngx-translate/core": "6.0.0",
    "@ngx-translate/http-loader": "0.0.3",
    "@types/cordova": "0.0.34",
    "@types/cordova-plugin-device": "0.0.3",
    "@types/cordova-plugin-file": "0.0.3",
    "@types/cordova-plugin-file-transfer": "0.0.3",
    "@types/cordova-plugin-inappbrowser": "0.0.4",
    "@types/cordova-plugin-splashscreen": "0.0.3",
    "@types/cordova-plugin-statusbar": "0.0.3",
    "@types/cordova-sqlite-storage": "^1.5.1",
    "@types/cordova.plugins.diagnostic": "^3.4.0",
    "@types/phonegap-plugin-push": "0.0.31",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.8.1",
    "ionicons": "3.0.0",
    "rxjs": "5.0.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.1.4",
    "typescript": "2.1.6"
  },
  "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map_type": "source-map"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard",
    "cordova-plugin-inappbrowser",
    "cordova-sqlite-storage",
    "cordova-plugin-file",
    "cordova-plugin-compat",
    {
      "variables": {
        "SENDER_ID": "XXXX"
      },
      "locator": "https://github.com/phonegap/phonegap-plugin-push",
      "id": "phonegap-plugin-push"
    },
    "cordova-plugin-x-toast",
    "cordova-plugin-file-transfer",
    "cordova-plugin-zip",
    "cordova.plugins.diagnostic",
    "cordova-plugin-geolocation",
    {
      "variables": {
        "BRANCH_KEY": "key_live_XXXX",
        "URI_SCHEME": "XXXX"
      },
      "locator": "https://github.com/BranchMetrics/cordova-ionic-phonegap-branch-deep-linking",
      "id": "branch-cordova-sdk"
    },
    "cordova-plugin-screen-orientation"
  ],
  "cordovaPlatforms": [
    "android",
    "browser",
    "ios",
    {
      "platform": "ios",
      "version": "",
      "locator": "ios"
    }
  ]
}

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

ionic-app-scripts 1.1.4

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

When using "ionic_source_map_type": "#inline-source-map" in packages.json, I can debug TypeScript in DevTools, but using --prod makes the compilation fail:

xavi@Xaviers-iMac:/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic$ ionic run android --prod

> JustToday@ ionic:build /Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic
> ionic-app-scripts build "--prod"

[14:18:54]  ionic-app-scripts 1.1.4 
[14:18:54]  build prod started ... 
[14:18:54]  clean started ... 
[14:18:54]  clean finished in 4 ms 
[14:18:54]  copy started ... 
[14:18:54]  ngc started ... 
[14:19:09]  ngc finished in 15.29 s 
[14:19:09]  preprocess started ... 
[14:19:09]  optimization started ... 
[14:19:14]  copy finished in 19.97 s 
[14:19:18]  optimization finished in 9.11 s 
[14:19:18]  preprocess finished in 9.11 s 
[14:19:18]  webpack started ... 
[14:19:46]  webpack finished in 27.43 s 
[14:19:46]  sass started ... 
[14:19:46]  transpile bundle started ... 
[14:20:01]  transpile bundle finished in 15.49 s 
[14:20:01]  uglifyjs started ... 
[14:20:02]  sass finished in 16.28 s 
[14:20:02]  cleancss started ... 
[14:20:03]  cleancss finished in 1.29 s 
[14:20:15]  uglifyjs failed: ENOENT: no such file or directory, open 
            '/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/www/build/main.js.map' 
[14:20:15]  ionic-app-script task: "build" 
[14:20:15]  Error: ENOENT: no such file or directory, open 
            '/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/www/build/main.js.map' 
Error: ENOENT: no such file or directory, open '/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/www/build/main.js.map'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.fs.readFileSync (fs.js:508:33)
    at Object.exports.minify (/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/node_modules/uglify-js/tools/node.js:120:31)
    at runUglifyInternal (/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/node_modules/@ionic/app-scripts/dist/uglifyjs.js:47:19)
    at /Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/node_modules/@ionic/app-scripts/dist/uglifyjs.js:31:32
    at uglifyjsWorker (/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/node_modules/@ionic/app-scripts/dist/uglifyjs.js:22:12)
    at process.<anonymous> (/Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/node_modules/@ionic/app-scripts/dist/worker-process.js:8:9)
    at emitTwo (events.js:106:13)
    at process.emit (events.js:191:7)

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "ionic:build" "--" "--prod"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! JustToday@ ionic:build: `ionic-app-scripts build "--prod"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the JustToday@ ionic:build script 'ionic-app-scripts build "--prod"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the JustToday package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ionic-app-scripts build "--prod"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs JustToday
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls JustToday
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Volumes/Data/xavi/work/code/ionic/incubapps/just-today-ionic/npm-debug.log

[alexbonhomme]

Hey,

I get the exact same problem :-(
This seems to be a workaround : #407 (comment)

But it isn't a definitive solution for me... (because of my poor wireless network)

▶ ionic info

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v4.6.1
Xcode version: Xcode 8.2.1 Build version 8C1002

[xmellado]

Hi,
Thanks for the information, but ionic run android -l it is not an option for me. Live reload will not work with my app, because I have some features and plugins that do not support it.
Regards,
Xavi

[danbucholtz]

Source maps should be enabled by default. I cannot recreate what you're seeing.

Thanks,
Dan

[xmellado]

Hi,

@danbucholtz I have tested this in two different machines with two phones (Nexus 5 and Galaxy S6 Edge):

Steps to reproduce:

1. Install globally Ionic CLI 2.2.1.
2. Install globally Cordova 6.5.0.
3. Connect an Android device and run in command line: adb devices. The device id should be shown.
4. Create a new project for Ionic 2.3.0 with: ionic start --v2 myApp tabs.
5. Change dir and go inside the folder: cd myApp.
6. Add Android platform: ionic platform add android.
7. Build and run in an Android device: ionic run android.
8. Open Chrome, write chrome://inspect/#devices in navigation bar and inspect the Ionic WebView.
9. Source maps are not available.

Thanks in advance,
Xavi

[prabhjotAppmobi]

@xmellado - Is it fixed for you? I am seeing same issue!

Thanks

[xmellado]

@prabhjotAppmobi Sorry but no. The issue is still present and I have tried version 1.2.2 with the same results. I cannot debug TypeScript sources on a real Android device. I will test versions 1.3.x in a few days with Ionic 3, and I will update this issue if there are changes.

[alexbonhomme]

@prabhjotAppmobi @xmellado Still the same problem with 1.3.0 version.

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.10.2
Xcode version: Xcode 8.3.1 Build version 8E1000a

[brenkehoe]

I got same problem trying to debug on ios device using safari or safari tp.

Your system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.1 Build version 8E1000a

[xmellado]

@danbucholtz I can confirm that this issue persists with Ionic 3.0.1 and app scripts 1.3.3.

[prabhjotAppmobi]

@xmellado @BlckShrk - Thanks for the feedback. I added below entry to "package.json" and able to debug the typescript on android device.

"config": {
"ionic_bundler": "webpack",
"ionic_source_map_type": "#inline-source-map"
}

The only problem is that I am not able to check variable values while debugging. Any clues for it?

My ionic-app-script version is 1.3.0

[cocowalla]

@danbucholtz

I have the same issue - no Typescript source maps when running on an emulator or a real device. I was on the latest Ionic 2 and hoped upgrading to Ionic 3 and the latest app-scripts would fix it. Unfortunately not.

Changing ionic_source_map_type to #inline-source-map also seems to fix this issue for me - but at the expense of breaking --prod builds :(

Ionic losing source map functionality every other release or so has been a constant bugbear since Ionic 2 started :(

It would be good to see this issue reopened and given some attention.

[cmaart]

+1

Can reproduce problem in app-scripts 1.3.4

ionic info

Your system information:

ordova CLI: 6.5.0
Ionic Framework Version: 3.1.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.4
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.4
Xcode version: Not installed