你如何調試 Angular 6 庫

Question

我正在編寫一個 Angular 6 庫，但無法弄清楚如何進入打字稿。

我使用以下方法生成了應用程序： ng new mylibapp

然后我使用以下方法添加了庫： ng g library @abc/cool-lib -p abc

當我執行時： ng build @abc/cool-lib

它在mylibapp/dist/abc/cool-lib文件夾中生成代碼

我現在如何調試此代碼並在位於mylibapp/projects/abc/cool-lib/src/lib的 ts 文件中設置斷點

Answer 1

查看有關 library 的 Angular CLI 文檔，它提到了以下內容：

一些類似的設置會直接在 tsconfig 中添加源代碼的路徑。 這樣可以更快地查看您的應用程序中的更改。

因此，您實際上可以更新您的 tsconfig.json 以引用您的本地源代碼而不是構建的庫。

使用構建的項目：

 "paths": {
  "abc": [
    "dist/abc"
  ]

將其更改為使用實際來源：

"paths": {
  "abc": [
    "projects/abc/src/public_api"
  ]

文檔中提到了一些缺點：

但這樣做是有風險的。 當您這樣做時，您的應用程序的構建系統也在構建庫。 但是您的庫是使用與您的應用程序不同的構建系統構建的。

但就我而言，讓我在 Chrome 中進行交互式調試以及在不重新構建的情況下立即查看更改是值得的。 不過，我確實在此工作流程之外對已構建的項目進行了全面測試。

Answer 2

從@angular/cli v7 開始，您可以將以下配置添加到您的angular.json文件中，以便在使用ng serve時為庫啟用源映射：

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

Answer 3

現在的設置（使用 Angular 7，可能已經 6.2）非常簡單：

• 在監視模式下編譯庫： ng build [mylib] --watch
• 使用供應商源地圖啟動應用程序： ng serve --vendor-source-map

現在庫源可用（在 Chrome/Firefox/... 開發工具中）。

---

Angular 7.2 的更新：

--vendor-source-map已替換為--sourceMap=true|false用於ng serve ：

• ng serve --source-map=true

---

進一步更新： --source-map=true不幸的是沒有達到預期的效果。 這里有一個相關的問題。

Answer 4

從 Angular CLI v. 6.1開始，您可以使用開關--vendor-source-map ，這將允許您在調試時進入庫的 typescript 源。 嘗試ng build @abc/cool-lib --vendor-source-map看看是否有幫助。 您也可以將開關與ng serve一起使用。 就我而言，我在托管庫的應用程序上運行 ng serve ，並且包含庫的源映射。 這種方式還可以讓您不必編輯 tsconfig.json

Answer 5

如果您使用 angular 版本 12 或更高版本，則必須在主機應用程序的angular.json中添加sourceMap和scripts 、 styles 、 vendor為 true （如果需要它們進行調試）。

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "vendor": true
            },

Answer 6

查看 VSCode 中的“Debugger for Chrome”擴展程序，也許對您有所幫助。