How to debug a custom schematic that uses an Angular schematic

hugo mercier
Sep 7 · 2 min read

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

Image for post
Image for post

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 :

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:

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 !

YounitedTech

Le blog Tech de Younited, où l’on parle de développement…

Thanks to Etienne Delattre and Slim Ayache

hugo mercier

Written by

YounitedTech

Le blog Tech de Younited, où l’on parle de développement, d’architecture, de microservices, de cloud, de data… Et de comment on s’organise pour faire tout ça. Ah, et on recrute aussi, on vous a dit ?

hugo mercier

Written by

YounitedTech

Le blog Tech de Younited, où l’on parle de développement, d’architecture, de microservices, de cloud, de data… Et de comment on s’organise pour faire tout ça. Ah, et on recrute aussi, on vous a dit ?

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store