Our content is free thanks to ag-Grid

ag-Grid is the industry leading JavaScript datagrid

ag-grid.com

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
2 min read

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

Introduction

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

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

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.

{
  "$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.

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

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

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

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.

Discuss with community

Share

About the author

author_image
Santosh Yadav

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 Yadav

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

NxAngularCli
NxAngularCli
NxAngularCli

Featured articles

Angularpost
14 January 20216 min read
Demystifying Taiga UI root component: portals pattern in Angular

Just before new year we announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.

JavaScriptpost
22 December 20203 min read
throwError is not throw error

The American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”

JavaScriptpost
22 December 20203 min read
throwError is not throw error

The American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”

Read more
JavaScriptpostthrowError is not throw error

22 December 2020

3 min read

The American poet Edward Estlin Cummings was famous for his eccentric use of spacing and capitalization, to the point that his name is usually styled as e e cummings. I wonder what he would think of an RxJS question that a friend asked me: “Is returning throwError the same as writing ‘throw error’?”

Read more