By adding new features to the Componizer VsCode extension, we managed to get a better understanding on how to debug custom Angular components.
We want to debug our custom schematic that is itself calling an Angular schematic.
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
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:
- 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:
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 :
Otherwise the tree will not be updated !