如何使用 Angular CLI 生成源地图并将其上传到 Sentry？答案

【问题标题】：How to generate sourcemaps using Angular CLI and upload them to Sentry?如何使用 Angular CLI 生成源地图并将其上传到 Sentry？
【发布时间】：2019-02-28 13:57:15
【问题描述】：

有两种方法可以设置源地图：将它们托管在网站上并在捆绑文件中引用，或者将它们直接上传到像哨兵这样的服务。我正在努力完成后者。问题是，如果没有将文件路径写入捆绑文件，似乎没有办法使用 angular cli 生成源映射。

我的第一个想法是有两个构建 - 一个生成源映射，一个不生成。然后，我将只部署没有源映射的构建，并将构建与它们一起上传到哨兵。这不起作用，因为捆绑文件名不同（角度 cli 使用文件哈希作为缓存破坏的文件名，当您生成源映射时，它会将 .map 文件的路径添加为末尾的注释，从而导致哈希和文件名）。

我的另一个选择是使用源地图构建，将它们上传到哨兵，然后在部署站点之前删除地图文件。但问题是捆绑文件仍然包含对现在不存在的地图文件的引用。这本身不应该是一个问题，但它可能会引发扩展程序或浏览器的问题，并且看起来像是一个骇人听闻的解决方案。

你会如何在构建过程中实现这样的东西？

【问题讨论】：

你有没有设法解决这个问题？
@NicholasColes 我在已添加到 backlog 的 repo 上创建了一个功能请求 - github.com/angular/angular-cli/issues/12375
现在有人提出解决方案了吗？我也有同样的情况，如果有人找到了实现这一目标的方法，那就太好了。
认为我找到了答案但还没有尝试过：blog.angularindepth.com/…
@Anthony 已合并解决方案：github.com/angular/angular-cli/pull/13062

标签： angular continuous-integration source-maps sentry

【解决方案1】：

如 cmets 中所述，您可以在 angular.json 文件中启用 sourceMaps，如下所示：

 "configurations": {
  "production": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "hidden": true
    },

另外，我建议您在上传到哨兵之后和部署之前删除 .map 文件。所以在你的 ci 中添加这一行：

rm -rf dist/YOUR_PROJECT/*.map

【讨论】：

【解决方案2】：

Here 是解释如何上传和监控角度源图到哨兵的文章。

【讨论】：