如何配置 angular-cli 以创建内联源映射？答案

【问题标题】：How to configure angular-cli to create inline sourcemaps?如何配置 angular-cli 以创建内联源映射？
【发布时间】：2019-03-01 03:48:07
【问题描述】：

angular.json 仅提供打开/关闭源映射生成的选项，但默认情况下它位于单独的文件中。

tsconfig.json 也提供了 inlineSources 选项，但它被 angular-cli 忽略了。

有没有办法告诉 angular-cli 在 .js 中编写源映射？

【问题讨论】：

标签： angular-cli source-maps

【解决方案1】：

谁可能关心，这是我实现的方法，以在 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 源更好的方法 :)

【讨论】：

ngx-build-plus 不适用于最新的 Angular。错误：Cannot read property 'architect' of undefined。我无法理解 Angular CLI 开发人员决定反对这个选项。因为它很容易实现。只是可选 webpack.config.js 的一个选项。如果没有这个官方选项，我们必须依赖第三个库。在这种情况下，它不起作用。痛...
@Dominik 确认它不适用于最新的 Angular cli（即使我没有收到“无法读取属性”错误）。这是更新的解决方法github.com/ionic-team/ionic-framework/issues/… 或者您可以尝试此解决方法，它也适用于github.com/ionic-team/ionic-framework/issues/…

【解决方案2】：

不支持。为了实现这一点，我修补了 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';

【讨论】：

上帝保佑你的解决方案，看起来这是使 Intellij 能够在 Angular 中命中调试断点的唯一且唯一的方法。

【解决方案3】：

使用 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

【讨论】：