Add ability to debug Ionic4 TypeScript files when running on device or emulator

[pjc2007]

As per this issue (ionic-team/ionic-framework#16455 (comment)), would like to be able to debug when running on an emulator as could in previous versions.

As mentioned in the link, this will work with inline source maps but currently have to edit and Angular build source file to do this.

Would like this out of the box

[imhoffd]

@pjc2007 Are you using the --source-map flag?

[KevinKelchen]

Hi @dwieeb 👋,

I get the same behavior with or without the --source-map flag: no source maps. Whether it's a device or an emulator, it behaves the same.

In either case I see the *.js.map files in the physical www directory in the root of the repo, but when I use the Chrome device inspector, I do not have source maps.

The steps to reproduce are mentioned in the issue already referenced: ionic-team/ionic-framework#16455.

[ryaa]

Would it be possible to support customizing cordova build, to enable debugging on Android devices, by building it in to the ionic schematics which can be found here: https://github.com/ionic-team/angular-toolkit/blob/master/builders/cordova-build/index.ts

More details can be found here angular/angular-cli#13543 (comment)

[ryaa]

To whom it may concern, here is the approach I implemented to enable debugging with source maps support on Android devices while the above feature is not ready yet.

• install ngx-build-plus by running npx ng add ngx-build-plus
  This will install the required npm package and update angular.json as required
  For more details please see https://github.com/manfredsteyer/ngx-build-plus
• create new file build-customization-plugin.js in the project root directory and add the below content in this file

var merge = require('webpack-merge');

exports.default = {
    config: function (cfg) {
        const strategy = merge.strategy({
            'devtool': 'replace',
        });

        return strategy(cfg, {
            devtool: 'inline-source-map'
        });
    }
}

• run ng build --eval-source-map --plugin ~build-customization-plugin.js from the root directory to build the project with source maps to debug on Android devices

This is a better approach then changing angular/cli source :)

[chrisvor]

@ryaa Thank you for the workaround above! I tried it on a new project and it seems to be working. However I followed your method in an existing older project (created 3-4 months ago) Ionic 4 + Capacitor, when I ran "npx ng add ngx-build-plus" it gave me this error:

"The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support."

Any idea what is the problem and how to fix ?

Thanks
Chris

[ryaa]

@chrisvor I did not see this problem (may be because I created an ionic/capacitory project quite recently) so not sure if I can help here...

[chrisvor]

@ryaa ok thanks anyway. Maybe somebody else can assist? Also when I try to do the ng build command I get:
Unknown option: '--plugin'
Unknown option: '~build-customization-plugin.js'

My ng version output is:

Angular CLI: 7.3.2
Node: 10.15.0
OS: win32 x64
Angular: 6.1.10
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.8.9
@angular-devkit/build-angular 0.7.5
@angular-devkit/build-optimizer 0.7.5
@angular-devkit/build-webpack 0.7.5
@angular-devkit/core 0.7.5
@angular-devkit/schematics 0.7.5
@angular-devkit/schematics-cli 0.8.9
@angular/cli 7.3.2
@angular/fire 5.1.1
@ngtools/webpack 6.1.5
@schematics/angular 7.3.2
@schematics/schematics 0.8.9
@schematics/update 0.13.2
rxjs 6.4.0
typescript 2.9.2
webpack 4.9.2

I'm just writing this here maybe it will help in identifying the issue

[evanmonfee]

In case it helps,

1. Changing the angular webpack.js file is no longer a solution that works in the newer version of angular-cli as the file content is different.
2. For those who don't want to use ngx-build-plus solution (Add ability to debug Ionic4 TypeScript files when running on device or emulator  #3802 (comment)), add an after build hook to manually embed your sourcemap files along with the build output files. Refer - bug: source maps are not loaded when debugging with chrome dev tools on device ionic-framework#16455 (comment)
   However, this option increases your bundle size (apk) and should be manually disabled in production.