如何配置angular-cli以创建内联sourcemaps？

Question

如何配置angular-cli以创建内联sourcemaps？

angular-clisource-maps

8

angular.json提供了打开/关闭sourcemap生成选项，但默认情况下会生成单独的文件。

tsconfig.json也提供了inlineSources选项，但由于angular-cli的原因被忽略了。

有没有一种方法可以告诉angular-cli将源映射写入.js文件内？

- szabyg

4个回答

1

使用Angular 12时，步骤与@alex-ryltsov提到的相同，但有一些变化：

安装ngx-build-plus：npx ng add ngx-build-plus
在项目根目录中创建文件build-customization-plugin.js：

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

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

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

- Adrián Bueno

1

这是不支持的。为了实现这一点，我修补了 Angular CLI 源代码（我的 @angular/cli 版本为 7.0.0），以使用 inline-source-maps Webpack 选项。为此，我更改了 node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js 文件中的一行。

sourcemaps = 'eval';

到

sourcemaps = 'inline-source-map';

- Alex Ryltsov

感谢您提供的解决方案，看起来这是使Intellij能够在Angular中触发调试断点的唯一方法。 - Liebster Kamerad

0

Angular 16的调整：

安装ngx-build-plus：npx ng add ngx-build-plus
在项目根目录中创建文件build-customization-plugin.js：

// 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;
    }
}

使用以下命令构建：ng build --plugin ~build-customization-plugin.js（或者如果你的shell将"~"替换为你的主目录，则使用ng build --plugin '~/path-to-script-relative-to-package-json/build-customization-plugin.js'）。

- izogfif

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Ryltsov · Accepted Answer

尊敬的用户，这是我实施启用支持Android设备的源映射调试方法：

通过运行 npx ng add ngx-build-plus 安装 ngx-build-plus
这将安装所需的 npm 包并根据需要更新 angular.json 更多详情请参阅 https://github.com/manfredsteyer/ngx-build-plus
在项目根目录中创建新文件 build-customization-plugin.js 并添加以下内容：

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

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

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

在根目录下运行ng build --eval-source-map --plugin ~build-customization-plugin.js，以生成带有源映射的项目，以便在 Android 设备上进行调试。

这比我之前描述的更改 angular/cli 源代码的方法更好 :)