How to debug Angular Schematics implementation using Visual Studio Code

How to Debug an Angular Schematic using Visual Studio Code

Being able to debug and traverse the code while it is executing is the foundation of our development workflow. This is an essential feature that allows us to debug and determine what the code is doing. It can be part of our testing workflow-attach a debugger and execute tests in specific scenarios.

Debugging also provides an opportunity to understand how the code (which we did not implement) works. This is of course the case with the schematic diagram. As Angular developers, we must be using schematics every day when using Angular CLI.

We use CLI to create new workspaces, projects, services, components, modules, classes, etc.-we rarely think about what happens behind the scenes.

However, understanding how schematics work allows us to appreciate the tools that provide us with such a multi-functionality. But it also helps to learn how to create our own schematics.

When you run/execute Schematic, you are running a node program. The specific program we run is a schematic diagram. Therefore, to get started, we need a schematic project.

Tooling and Prerequisites

Before, we can use schema-cli to create a schematic project, we need to make sure that the following packages are available in our development environment. Use -g to install the following packages to make them globally available.

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

This tool allows us to create new schematic projects using schematic collections. Run the schematics command in the terminal.

The output is a list of options for the command.

Use the schematic items in the collection to create a sample schematic collection with (3) schematics-these examples will help us become familiar with how the schematic works.

schematics schematic --name=schematics-debugged

Three folders are automatically created:

Our new schematic project is a collection of (3) schematics. Each (3) schematic in the sample project shows various functions of what the schematic can do and how they work together (combinable schematics).

This article will not go into the details of these schematics-it will focus on setting up an environment for debugging only.

Now you have a new schematic project. You can build and test the project with the following commands:

npm run build
npm run test

Start debugging

As mentioned earlier, when we execute the schematics command, we are executing a Node.js program and passing in some parameters.

In this case, it is a Schematics program. The parameters include the specific schematic project name and any other options we want to pass in.

Create a new launch.json configuration for the project. The type of configuration to be added is node.js-launch program.

When selecting this specific configuration for debugging, we need to target the Node.js program.

In this case, it is schemes.js (from the @angular-devkit/schematics-cli package). The program we want is a Javascript file in the bin folder of the package.

I installed the @angular-devkit/schematics-cli package locally in the project to simplify access to this program. The program properties of the startup configuration require that the file be the full path of the program or Javascript file location.

Use ${workspaceFolder} to provide the full path of the workspace/project folder.

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

After execution, the new content in package.json:

"@angular-devkit/schematics-cli": "^12.2.10",

The content of my launch.json file is as follows:

{
    // 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: Add each parameter individually in the args array. Since we are already in the root directory of the project (package.json has a scheme attribute pointing to the collection.json file).

As shown below: