Override default Angular schematics

Photo by Laura Ockel on Unsplash

In all my recent Angular projects I’m using shallow-render written by Brandon Domingue to help with unit tests. If you haven’t heard about it go and check it out, it is much easier than TestBed.

When you create a component using Angular CLI ng generate component command, it creates spec file which uses TestBed. It means that for every created component I have to manually change it to use shallow-render. And if a project has dozens or hundreds of components the amount wasted time on this manual work is huge.

To solve this problem I have created an npm package @mihalcan/shallow-render-schematics which allows generation of components with shallow-render spec file instead of TestBed.

I had two tasks in my mind:

1. Use ng add command to add shallow-render package
2. Override Angular ng g c command to generate components with shallow-render spec file.

Creating schematics with ng add support is quite easy and I’m not going to repeat this information. A few step by step guides can be found here or here.

The most interesting part was overriding ng g c command.

The first thing, we need to use extend property in collection.json file and specify the command we want to override, in our case it is component

Then we need to use the same schema.json as Angular’s component schematics because we want to have the same options as default ng generate component command. I simply copied source file from Angular github repo into my repo.

Our main task is to generate a spec file with a shallow-render template:

Template looks very similar to the code above with a few changes:

classify and dasherize are utility functions to transform string values. name , moduleName , relativePath and selector are variables passed from the code.

Schematic implementation

Below is the most important part of the implementation. Full source code can be found on shallow-render-schematics github repo.

Lines 1–10 — apply variables to our spec template

Lines 12–18 — get default workspace and project Angular schematics settings. Quite often we have default component settings such as style extensions ( .scss ), we need to provide these options into @schematics/angular so that component is generated with correct defaults.

Lines 20–28 — merge Angular component schematics with our shallow-render template

The last trick

Currently to call our schematics we would need to execute:

ng generate component {name} --collection=@mihalcan/shallow-render-schematics

To be able to use ng generate component without --collection property we need to set our schematics as default in angular.json file. We can do this as a part of ng add command:

The code above appends cli block with defaultCollection set to our package name.

As already mentioned source for @mihalcan/shallow-render-schematics can be found on github

Thanks to Mel Lota for the review.