Ionic-app-scripts: 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 : https://github.com/driftyco/ionic-app-scripts/issues/407#issuecomment-283926738

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.
3) Create a new project for Ionic 2.3.0 with: ionic start --v2 myApp tabs.
4) Change dir and go inside the folder: cd myApp.
5) Add Android platform: ionic platform add android.
6) Build and run in an Android device: ionic run android.
7) Open Chrome, write chrome://inspect/#devices in navigation bar and inspect the Ionic WebView.
8) 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

[cocowalla]

Just to confirm that this is still an issue with the latest app-scripts, 1.3.6

[danbucholtz]

We're looking into it.

Thanks,
Dan

[cocowalla]

This is _still_ an issue in 2.0.2. I sense that this is not a priority, but I'm unsure why that would be - having source maps when running in an emulator or on a device is absolutely invaluable.

[padraigoleary]

Can this issue be re-opened please?

[shuppert]

When will this be resolved? This is a big deal for debugging.

[ramzauchenna]

This issue is a serious problem. Can it be reopened please. I am using app-script 3.0.0 and same issue

[domisginger]

Okay so I've got my workaround to build with source maps for dev and without for prod.
I'm using @ionic/app-scripts 3.0.0 but it should work with minor tweaks for older versions.
Now app-scripts webpack has seperate configurations for dev and prod you can override the devtool for prod and use --generateSourceMap=false while keeping inline-source-map to allow source maps in dev builds.

In package.json

"config": {
    "ionic_source_map_type": "inline-source-map",
    "ionic_webpack": "./config/webpack.config.js"
},

Create ./config/webpack.config.js to edit the webpack devtool to ignore the ionic_source_map_type and default to source-map

var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
  useDefaultConfig.prod.devtool = 'source-map';
  return useDefaultConfig;
}

Development:

ionic cordova build android --debug --device

Production:

ionic cordova build android --release --prod --device --generateSourceMap=false

[cocowalla]

@domisginger I've been using a different workaround, with this in ./config/copy.config.js:

if (process.env.IONIC_ENV === 'prod') {
  process.env.IONIC_GENERATE_SOURCE_MAP = false;
  process.env.IONIC_SOURCE_MAP_TYPE = 'source-map';
}

along with this in my package.json:

"config": {
  "ionic_source_map_type": "#inline-source-map",
  "ionic_copy": "./config/copy.config.js"
}

This works, but 'misusing' copy.config always felt wrong - I'll give your workaround a try as it feels much less hacky!

A question though - your release build command uses generateSourceMap=false, but it doesn't actually seem to be required since your webpack.config.js always sets source maps to source-map for production builds?

[domisginger]

@cocowalla your right, I had it in as a future proof. 'source-map' doesn't currently generate source maps but I thought it was intended too and not working which was why 'inline-source-map' aren't actually supported. I could be wrong.

[fdambrosio]

I have the same problem

  @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.2

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.1
    Cordova Platforms  : android 6.3.0 ios 4.5.2
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2
    Node              : v6.11.4
    npm               : 5.5.1
    OS                : macOS Sierra
    Xcode             : Xcode 9.0 Build version 9A235

[JeongJun-Lee]

I have the same issue at app-scripts 3.1.6. Pls reopen this. It's very critical.

[picolo74]

This is really critical, can't debug app on device/emulator !

Chrome inspect devices : 404 Not Found The resource could not be found.

cli packages: (/home/aurel/.nvm/versions/node/v7.7.1/lib/node_modules)

@ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1

global packages:

cordova (Cordova CLI) : 6.1.1

local packages:

@ionic/app-scripts : 3.1.8
Cordova Platforms  : android 5.1.1
Ionic Framework    : ionic-angular 3.9.2

System:

Node : v7.7.1
npm  : 5.5.1
OS   : Linux 3.16

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

[jfspencer]

@danbucholtz is this issue actually being looked at? it is still closed. This is a huge non-starter.

[ThalesMatoso]

=( i need solution ..

[phiamo]

same issue here :(

[kirillgroshkov]

Same

[varunkumarm]

@danbucholtz Appreciate any feedback on this issue. Please reopen the issue at the least since it is clearly a problem for many including me.

[caramorsimon]

This remains a problem with ionic4, only now it doesn't use webpack, it has moved onto angular cli builders which are configured (somehow) in ./angular.json

[tva-TIS]

As mentioned here I got it device typescript debugging to work with capacitor live reloading.