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.

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:

  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:

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 ?

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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