Overriding Angular Schematics

Post Editor

Last week I was working on an Angular Library, and in all the components we wanted to have encapsulation set to None and changeDetection to OnPush. We also wanted to add all components and directives to exports. Let's see how we can achieve this without writing any code.

2 min read
post

Overriding Angular Schematics

Last week I was working on an Angular Library, and in all the components we wanted to have encapsulation set to None and changeDetection to OnPush. We also wanted to add all components and directives to exports. Let's see how we can achieve this without writing any code.

post
post
2 min read

In this blog post, we will learn how we can override some default options in Angular Schematics.

Introduction
Link to this section

Last week I was working on an Angular Library, and in all the components we wanted to have encapsulation set to None and changeDetection to OnPush. We also wanted to add all components and directives to exports, so it can be utilized in other modules.

We realized it will be a waste of effort to add it manually for each component and module.

Solution
Link to this section

The solution to avoid this is to use angular.json and now you must be like Joey and who wants to see the solution.

And it's not only for components we can override Schematics options from directives, classes, services and many more. Feeling like below guy.

We are getting there just hold on, we will do all this without writing any code.

Overriding Schematics Options
Link to this section

Every developer is aware of angular.json and most of the time we keep using default options provided and don’t bother into looking for what more it has to offer.

So let’s look at the options provided byangular.json create one Angular application using CLI.

Below is how your angular.json looks like.

<>Copy
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "bulma-app": { "projectType": "application", "schematics": { }, "root": "projects/bulma-app", "sourceRoot": "projects/bulma-app/src", "prefix": "app", "architect": { } } }, "defaultProject": "bulma-app" }

And the option we are interested in here is schematics . It opens up a lot of possibilities for us.

As you can see above once we move inside schematics options we can override several options by selecting one of the below, whichever you want to override.

  • @schematics/angular:component
  • @schematics/angular:class
  • @schematics/angular:directive
  • @schematics/angular:module
  • @schematics/angular:pipe
  • @schematics/angular:service

We will take an example of @schematics/angular:component in your project go ahead and below json.

<>Copy
"@schematics/angular:component": { "changeDetection": "OnPush", "inlineTemplate": true, "viewEncapsulation": "None" }

The next step is to run the below command to create a component.

<>Copy
ng generate component home

And notice the difference from the earlier generated component, you will have no .html file and changeDetection and viewEncapsulation properties will be available for you.

Conclusion
Link to this section

We are not covering all properties, as this will be for you to explore and use the most suitable options for your project. Schematics is really powerful, and this is what drives various commands in Angular CLI like generate component, generate service, but you may not need default options and may need to override some properties of Schematics, by using these options no need to make changes manually. Go ahead and automate and decide the best options for your project.

Share

About the author

author_image

Santosh is a GDE for Angular, he is an open-source contributor for Angular, NgRx, and Writer at AngularInDepth and DotNetTricks.

author_image

About the author

Santosh Yadav

Santosh is a GDE for Angular, he is an open-source contributor for Angular, NgRx, and Writer at AngularInDepth and DotNetTricks.

About the author

author_image

Santosh is a GDE for Angular, he is an open-source contributor for Angular, NgRx, and Writer at AngularInDepth and DotNetTricks.

Looking for a JS job?
Job logo
Senior Full Stack Developer | ASP.NET | Angular

Triskelle Solutions

Worldwide
Remote
$90k - $150k
Job logo
UI/Angular Developer

DXC Technology

Worldwide
Remote
$93k - $93k
Job logo
PDQ team| JavaScript developer (Angular/Node)

SD Solutions

Ukraine
Remote
$42k - $84k
Job logo
Full Stack AngularJS / Laravel Developer

The Kotter Group

Worldwide
Remote
$85k - $90k
More jobs
NxAngularCli
NxAngularCli
NxAngularCli

Featured articles

JavaScriptpost
27 September 202130 min read
An in-depth perspective on webpack's bundling process

Webpack is a very powerful and interesting tool that can be considered a fundamental component in many of today's technologies that web developers use to build their applications. However, many people would argue it is quite a challenge to work with it, mostly due to its complexity.

JavaScriptpost
27 September 202130 min read
An in-depth perspective on webpack's bundling process

Webpack is a very powerful and interesting tool that can be considered a fundamental component in many of today's technologies that web developers use to build their applications. However, many people would argue it is quite a challenge to work with it, mostly due to its complexity.

Read more
JavaScriptpostAn in-depth perspective on webpack's bundling process

27 September 2021

30 min read

Webpack is a very powerful and interesting tool that can be considered a fundamental component in many of today's technologies that web developers use to build their applications. However, many people would argue it is quite a challenge to work with it, mostly due to its complexity.

Read more