How to configure angular-cli to create inline sourcemaps?

Question

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?

Answer 1

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 :)

Answer 2

This is not supported. To enable this 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';

to

sourcemaps = 'inline-source-map';

Answer 3

With Angular 12, the steps are the same as @alex-ryltsov mentioned, but with some changes:

• Install ngx-build-plus: npx ng add ngx-build-plus
• Create file build-customization-plugin.js in the project root directory:

const { merge } = require("webpack-merge");

exports.default = {
  config: function (cfg) {
    return merge(cfg, {
      devtool: "inline-source-map",
    });
  },
};

• ng build --plugin ~build-customization-plugin.js

Answer 4

Adjustments for Angular 16:

• Install ngx-build-plus: npx ng add ngx-build-plus
• Create file build-customization-plugin.js in the project root directory:

// See https://github.com/ionic-team/ionic-framework/issues/16455#issuecomment-751963968

const { merge } = require("webpack-merge");
const webpack = require("webpack");

exports.default = {
    config: function (cfg) {

        const result = merge(cfg, {
            devtool: "inline-source-map",
        });

        // then we find SourceMapDevToolPlugin and remove it
        // This is because we should never use both the devtool option and plugin together.
        // The devtool option adds the plugin internally so you would end up with the plugin applied twice.
        // See https://webpack.js.org/configuration/devtool/
        const index = result.plugins.findIndex((plugin) => {
            return plugin instanceof webpack.SourceMapDevToolPlugin;
        });
        result.plugins.splice(index, 1);

        return result;
    }
}

• Build using ng build --plugin ~build-customization-plugin.js (or ng build --plugin '~/path-to-script-relative-to-package-json/build-customization-plugin.js' if your shell substitutes "~" with your home directory).