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?

Wallaroo

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

Grosvenor

ngx-build-plus does not work with the latest Angular. Error: Cannot read property 'architect' of undefined. I cannot understand the Angular CLI developers to decide against this options. Since it's very easy to implement. Just an option with optional webpack.config.js. Without this official option, we have to rely on a 3rd library. And in this case, it does not work. A pain... – Chemosphere

@Dominik confirming that it does not work for the latest angular cli (even though i did not get the 'cannot read property' error). Here is the updated workaround github.com/ionic-team/ionic-framework/issues/… or you can try this workaround which also works github.com/ionic-team/ionic-framework/issues/… – Grosvenor

Answer 2

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

Doom

Answer 3

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';

Grosvenor

God bless you for that solution, looks like it is the one and only way to make Intellij be able to hit debug breakpoints in Angular. – Caseation

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

Barite