Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to configure angular-cli to create inline sourcemaps?

angular.json only gives the option to turn on/off sourcemap generation but by default it's in separate files.

tsconfig.json gives also the inlineSources option but it's ignored by angular-cli.

Is there a way to tell angular-cli to write the source maps inside the .js?

like image 444
szabyg Avatar asked Sep 25 '18 13:09

szabyg


People also ask

What is Sourcemaps in Angular?

The source map explorer determines which file each byte in your minified code came from. It shows you an interactive tree-map visualization to help you debug where all the code is coming from. Before starting I would like to recommend this video from Stephen Fluin, angular team member.

Where is Angular CLI json located?

Where is Angular json CLI file? The angular-cli. json should be located in the root folder of the project.

What is Angular CLI json?

The angular.json file at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults. These are used for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace directory.


1 Answers

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

This is a better approach then changing angular/cli source as I described in a previous port :)

like image 136
Alex Ryltsov Avatar answered Oct 05 '22 00:10

Alex Ryltsov