Enable building with source maps generated as inline-source-map

[ryaa]

🚀 Feature request

Enable configure angular-cli to create inline source maps.
The problem is that it is not possible to debug hybrid/cordova based apps built with angular on android devices. The reason is that Chrome debugger cannot access the source map file on the device. The solution/fix is to include the source map inline

For example, here is one of the issue related to this #6674
The temporary hack described here however it would be very helpful to be able to configure angular cli using standard methods to generate inline source maps.

Command (mark with an x)

- [ ] new
- [x] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Description

A clear and concise description of the problem or missing capability...

As I understand (based on @angular-devkit/build-angular) angular cli either uses eval or source-map as a webpack devtool option (https://webpack.js.org/configuration/devtool/). There is no standard way to use a different devtool option for source maps generated.

Describe the solution you'd like

If you have a solution in mind, please describe it.

Add devtool or similar build option (smth like deprecated evalSourceMap build option but allowing to set any supported webpack devtool option)

Describe alternatives you've considered

Have you considered any alternative solutions or workarounds?

Options 1) The temporary hack described here
Option 2) Use custom tools to extend the Angular CLI build behaviour, for example https://github.com/manfredsteyer/ngx-build-plus

[Itrulia]

is there a usecase where you want inline sourcemaps? I don't want to ever ship sourcemap to every user since this would mean shipping 5mb of comments.

[ryaa]

is there a usecase where you want inline sourcemaps? I don't want to ever ship sourcemap to every user since this would mean shipping 5mb of comments.

This is absolutely required to debug ionic/angular/cordova based applications on android devices. The problem is that this is the only source map mode/style that works reliably on a real Android device due to security reasons.
This is not need for PROD build but is required for a debug build running on Android therefore it would be very helpful if the user could be able to opt-in for this feature.

This was possible to quite easily extend the webpack config to enable this in Ionic 3 and below (see https://stackoverflow.com/questions/41413082/ionic-2-application-running-on-the-android-device-cant-be-debugged/41414355#41414355) and this no longer works since Ionic 4 (which uses angular cli to build).

[Itrulia]

This is definitely not required to debug those applications.

• If you are using a service like raygun/sentry you can upload your sourcemaps in to their backends.
• Include your sourcemap files in the bundling of the app
• Use schematics to override the Webpack config (example how it's done: https://github.com/manfredsteyer/ngx-build-plus)
• You can also upload them on one of your servers (or use CI directly) and point it to those destinations.

If it is also only needed for hybrid apps it seems to make more sense to build 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

[mgechev]

@ryaa source maps should work properly in development if you're working on an Ionic app, not sure why this wouldn't work in cordova.

In production you don't have to ship source maps to your users, I'd recommend you to use "hidden" source maps. See this tweet.

[ryaa]

This is definitely not required to debug those applications.

• If you are using a service like raygun/sentry you can upload your sourcemaps in to their backends.
• Include your sourcemap files in the bundling of the app
• Use schematics to override the Webpack config (example how it's done: https://github.com/manfredsteyer/ngx-build-plus)
• You can also upload them on one of your servers (or use CI directly) and point it to those destinations.

The above are valid options (except option 2 which won't work due to security reasons) however I would be nice to be able to use a standard and simpler approach with a parameter to enable inline-source-maps.

If it is also only needed for hybrid apps it seems to make more sense to build 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

Ok. Thanks for this suggestion.

[ryaa]

@ryaa source maps should work properly in development if you're working on an Ionic app, not sure why this wouldn't work in cordova.

Everything works fine until build and run on a REAL Android device where, due to security reasons, only inline-source-maps allows to debug with the original sources. The problem is that when you're remote debugging on an android device, Chrome debugger cannot access the source map file on the device.

[ryaa]

To whom it may concern, here is the approach I implemented to enable debugging with source maps support on Android devices

• 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

[mgechev]

@ryaa excellent, thanks for sharing your solution. Let's keep this issue open for now until we go through the issue triage this week.