如何在使用npm链接的Angular库中启用sourcemap？

Question

我使用ng g library @my-org/some-lib创建了一个Angular 7库，并通过npm link在单独的Angular应用程序中使用它，以便能够同时开发应用程序和库。

现在我发现在开发工具中，我可以看到该库作为一个单独的my-org-some-lib捆绑的js文件，从vendor.js.map中解析出来，但是它没有进一步解析到sourceMappingURL=my-org-some-lib.js.map，而这个map文件实际上是在构建库时生成的，并且已经存在于my-org-some-lib.js中。

- ciekawy

---

不确定但看起来是同一个问题。https://github.com/webpack-contrib/source-map-loader/issues/40 请在链接中查看LeonardoGentile的答案。 - M S

Answer 1

对我来说有效的方法是从这里获取：https://angular.io/guide/workspace-config#source-map-configuration

"sourceMap": {
  "scripts": true,
  "styles": true,
  "hidden": false,
  "vendor": true
}

- azerafati

Answer 2

经过一段时间处理组合库源码，我终于找到了解决方案：

1. 在 angular.json 的 projects.app.architect.build.options 路径中需要包含以下内容：

"options": {
  "sourceMap": true,
  "vendorSourceMap": true,
  "preserveSymlinks": true, // <-- bonus - to use npm link'ed libraries
  // ...
  // note that json format does not allows comments ;)
}

2. 为了避免在生产环境中使用sourcemaps，请确保（默认情况下应该已经有了）

"configurations": {
  "production" :{
    "sourceMap": false
    // ...
  }
}

3. 在@angular-devkit/build-angular中存在一个错误，版本>=0.801.3应该可以正常工作

以上解决方案来自https://github.com/angular/angular-cli/issues/15531

- ciekawy

---

这些选项在 Angular 8 中已被移除。Azerafati 显示的选项更为最新，尽管我认为 这个解释更好地说明了它们的位置。 - Liam