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

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文件夹.这样我就可以在Dev Tools中调试应用程序而不会出现任何问题(此外,我可以通过这种方式直接从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. 构建消费应用程序时启用源映射+vendorSourceMap。

在构建角度库时启用源映射。

1. 在angular.json下面，项目 -> 库名称 -> 架构师 -> 构建 -> 选项

2. 启用源映射：

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

在构建消费应用程序时启用源映射+vendorSourceMap。

1. 在angular.json下面，项目 -> projctName -> 架构师 -> 构建

2. 设置：sourceMap​true

   "sourceMap": true
   

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

4. 设置：vendorSourceMap​true

   "vendorSourceMap": true
   

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

ng serve --vendor-source-map