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 的原创文章，尽在：” 汪子熙 ”: