Angular CLI 6 - 使用源映射构建 Angular 库

Question

我有一个使用 Angular CLI 6 (6.08) 生成的 Angular 6 项目。

我使用 ng generate library [lib name] --prefix [lib prefix] 创建了单独的库（本文概述的方法：https://medium.com/@tomsu/how-to-build-a-library-for-angular-apps-4f9b38b0ed11）。

我使用 ng build [lib name] 构建每个库，然后使用 ng serve 为我的应用程序提供服务。

但是，当我在 Chrome Dev Tools 中查看源代码时，我的库没有源映射。

我已经尝试使用 ng build [lib name] --source-map（如此处指定：https://github.com/angular/angular-cli/wiki/build）构建每个库，但我认为这仅用于构建该应用程序，而不是库。

有谁知道我做错了什么有替代解决方案吗？

Answer 1

我遇到了同样的问题。我最终将库路径直接指向库的 public_api.ts 文件而不是 dist 文件夹。这样我就可以在 Dev Tools 中调试应用程序而不会出现任何问题（此外，我可以直接从 Visual Studio Code this way 中调试它）。

所以在你的 tsconfig.json 而不是这个：

"paths": {
  "my-lib": [
    "dist/my-lib"
  ]
}

我用这个替换了它：

"paths": {
  "my-lib": [
    "projects/my-lib/src/public_api.ts"
  ]
}

这还有一个很好的副作用，即在库代码中进行更改时自动重新加载。

但是我不确定是否建议这样做，所以我想看看其他方法。

Answer 2

在您的 angular.json 中，您可以添加 "vendorSourceMap: true" 以启用您的库中的源映射。

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "vendorSourceMap": true

Answer 3

For Angular 9+ 为 angular.json

中的应用程序的本地开发配置设置 sourceMap

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

无需任何其他更改即可工作。

Answer 4

查看消费应用程序中 angular 库的源代码。我们需要做以下两点：

在构建 angular 库时启用源映射。

启用源地图：

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

在构建消费应用程序时启用源地图 + vendorSourceMap。

最后运行使用命令的消费应用程序：

ng serve --vendor-source-map

Angular CLI 6 - Build Angular Libraries With Source Maps