The problem is that when you’re remote debugging on an android device, Chrome debugger cannot access the source map file on the device. This is a known limitation.
The solution/fix is to include the source map inline. Prior to ionic 4 this was possible by setting the appropriate config to make the webpack to add the source maps inline.
However, since ionic cli v4 uses angular cli for building this option is not available since angular cli does not support this.
There are two options here (in addition to configuring capacitor to load the sources from the external url as mentioned above):
- make the build with --eval-source-map param
To do so i change scripts in package.json to have the below
“build”: “ng build --eval-source-map”
and then run npm run build . However this still has one limitation. The angular cli will build the source maps using eval param (see https://webpack.js.org/configuration/devtool/) which might not be what you are looking for. For more details please see angular/angular-cli#12434
- To see the true original ts file while debugging on Android I patched angular cli source code (i have @angular/cli version 7.0.0) to use inline-source-maps webpack option. To do so I changed one line in node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js file
sourcemaps = ‘eval’;
sourcemaps = ‘inline-source-map’;
After that running npm run build did the trick.