How to Debug an Angular Schematic using Visual Studio Code

能夠在代碼執行時調試和遍歷代碼是我們開發工作流程的基礎。這是一項必不可少的功能，使我們能夠調試和確定代碼在做什么。它可以是我們測試工作流程的一部分——附加調試器并在特定場景中執行測試。

調試還提供了一個機會來了解代碼（我們沒有實現的）是如何工作的。原理圖當然就是這種情況。作為 Angular 開發人員，我們在使用 Angular CLI 時肯定每天都在使用原理圖。

我們使用 CLI 創建新的工作區、項目、服務、組件、模塊、類等 - 我們很少考慮幕后發生的事情。

但是，了解原理圖的工作原理使我們能夠欣賞為我們提供如此多功能的工具。但它也有助于學習如何創建我們自己的原理圖。

當您運行/執行 Schematic 時，您正在運行一個節點程序。 我們運行的具體程序是原理圖。 因此，要開始，我們需要一個原理圖項目。

Tooling and Prerequisites

之前，我們可以使用 schema-cli 創建一個原理圖項目，我們需要確保我們的開發環境中有以下包可用。 使用 -g 安裝以下軟件包以使其全局可用。

npm install -g @angular-devkit/schematics
npm install -g @angular-devkit/schematics-cli

該工具允許我們使用原理圖集合創建新的原理圖項目。 在終端中運行 schematics 命令。

輸出是命令的選項列表。

使用集合中的原理圖項目創建帶有 (3) 個原理圖的示例原理圖集合 - 這些示例將幫助我們熟悉原理圖的工作原理。

schematics schematic --name=schematics-debugged

自動創建了三個文件夾：

我們的新原理圖項目是 (3) 個原理圖的集合。 示例項目中的每個 (3) 原理圖都展示了原理圖可以做什么以及它們如何協同工作（可組合原理圖）的各種功能。

本文不會詳細介紹這些原理圖——它會專注于設置僅用于調試的環境。

現在您有了一個新的原理圖項目。 您可以使用以下命令構建和測試項目：

npm run build
npm run test

開始調試

如前所述，當我們執行schematics 命令時，我們正在執行一個 Node.js 程序并傳入一些參數。

在這種情況下，它是一個 Schematics 程序。參數包括特定的原理圖項目名稱和我們想要傳入的任何其他選項。

為項目創建一個新的 launch.json 配置。要添加的配置類型是 node.js - launch program.

選擇此特定配置進行調試時，我們需要針對 Node.js 程序。

在本例中，它是 schemas.js（來自 @angular-devkit/schematics-cli 包）。我們想要的程序是包的bin文件夾中的一個Javascript文件。

我通過在項目中本地安裝 @angular-devkit/schematics-cli 包來簡化對這個程序的訪問。啟動配置的程序屬性要求文件是程序或 Javascript 文件位置的完整路徑。

使用 ${workspaceFolder} 提供工作區/項目文件夾的完整路徑。

npm install -D @angular-devkit/schematics-cli

執行完之后，package.json 里新增的內容：

“@angular-devkit/schematics-cli”: “^12.2.10”,

我的 launch.json 文件內容如下：

{// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Launch Program for Schematics","args": [".:my-other-schematic","--name=hello"],"program": "${workspaceFolder}/node_modules/@angular-devkit/schematics-cli/bin/schematics.js","outFiles": []}] }

• args：在 args 數組中單獨添加每個參數。由于我們已經在項目的根目錄中（package.json 有一個指向 collection.json 文件的 schemas 屬性）。

如下圖所示：

如果原理圖的路徑不同（即，如果您使用工作區），您可能需要修改參數。

outFiles：使用空 [] 添加此屬性。

最后點擊 f5，就可以開始調試了：

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的如何使用 Visual Studio Code 调试 Angular Schematics 实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。