How to debug a custom schematic that uses an Angular schematic

By adding new features to the Componizer VsCode extension, we managed to get a better understanding on how to debug custom Angular components.

Context

We want to debug our custom schematic that is itself calling an Angular schematic.

The Componizer schematic is calling the schematic to create a new component and then run the custom code.

Our development environment :

• The schematic project repository, that contains the schematic code
• A fresh Angular project repository : the code on which we want to test and debug our schematic, i.e. the consumer application

First try: launch the debug from the schematic code

Debug configuration in the schematic project

Notice that the custom prefix in the first argument "./dist/custom:ng-my-schematic" corresponds to the folder where the collection.json file is present. But when we try and debug from this schematic, we get the following error:

Error: Unable to locate a workspace file for workspace path.

Why ? The schematic is looking for the angular.json at the root of the execution context. It seems there is actually no way to pass the path of the angular.json file as a parameter.

For example, if your custom schematic is creating a new component, the getWorkspace function doesn’t handle the optional parameter path?:string, you can see the issue here.

Second and successful try: launch the debug from the consumer application

3 configuration steps are necessary:

1. npm link: you need to access the code of your schematic from the consumer application. So, in the built schematic folder run npm link, then in the consumer root path run npm link @my-custom-schematic

2. Install @angular-devkit/schematics-cli

3. Add new debug configuration:

Debug configuration in the consumer project

This should do the trick!

A final tip

If you are in the same situation as us, the first sub schematic is the Angular one and you are expecting in your code to have access to the newly created files in the tree, you have to add in the debug arguments :

--dry-run=false

Otherwise the tree will not be updated !