如何配置angular-cli创建内联源地图? [英] How to configure angular-cli to create inline sourcemaps?

问题描述

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

tsconfig.json还提供了inlineSources选项，但是angular-cli忽略了它.

是否可以告诉angular-cli在.js内编写源地图?

解决方案

这可能是我关注的问题，这是我为在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设备上进行调试

这是比我在上一个端口中描述的更改角度/cli信号源更好的方法:)

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?

解决方案

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

这篇关于如何配置angular-cli创建内联源地图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！