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 开发工具中查看源代码时，我的库没有源映射。

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

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

Answer 1

我遇到了同样的问题。我最终将库路径直接指向库的public_api.ts 文件，而不是指向dist 文件夹。通过这种方式，我可以毫无问题地在开发工具中调试应用程序（此外，我还可以通过这种方式直接从 Visual Studio Code 中调试它）。

所以在你的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

在消费应用中查看 Angular 库的源代码。 我们需要做到以下2点：

1. 在构建角度库时启用源映射。
2. 在构建消费应用时启用 source maps + vendorSourceMap。

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

1. 在angular.json下，projects -> library_name -> architect -> build -> options

2. 启用源地图：

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

在构建消费应用时启用 source maps + vendorSourceMap。

1. 在angular.json下，projects -> projctName -> architect -> build

2. 将sourceMap 设置为true：

   "sourceMap": true
   

3. 在angular.json下项目->项目名称->服务->选项

4. 将vendorSourceMap 设置为true：

   "vendorSourceMap": true
   

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

ng serve --vendor-source-map

Answer 4

对于 Angular 9+，在 angular.json

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

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

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