What is Schematics in Angular?

user_9953550 0
Viewed 2536

I have read this explanation from the official angular blog https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2

Schematics is a workflow tool for the modern web; it can apply transforms to your project, such as create a new component, or updating your code to fix breaking changes in a dependency. Or maybe you want to add a new configuration option or framework to an existing project.

and I even followed the example in the blog of how to generate a new schematic

npm install -g @angular-devkit/schematics-cli

schematics blank --name=my-component

after which I opened the my-component folder. This is where my confusion starts... The generated files could be generated by

ng new

the only difference being the above command will produce more files than the schematics one. From the description: the creating of new components and updating your code done by schematic but this can be done by the angular CLI by using "ng new"

  1. So what is the advantage of using schematics as opposed to just using the angular CLI?(please compare to help in understanding better what schematics are)
  2. and can one achieve what schematics are doing by just using ng new?
  3. What are the unique applications of schematics that can only be achieved by using schematics? .....(Thank you in advance:)
angular-cli angular
1 Answers

The Angular CLI is using schematics under the hood. When you're happy with the Angular CLI for creating projects and components, you don't need to know anything of schematics. When you want another setup AND want other developers to use your setup you could create your own schematics.

For example: we are creating a large application with over 150 different pages with multiple devOps teams. We have created schematic to simply create pages, features and use services which are fit in our application setup. Making a schematic is much easier to maintain then explaining to every developer how to setup a page. It also brings consistency in the project.

Other big projects like Ionic or NX https://nrwl.io/nx also make use of schematics to let you create application and pages within their architecture.

So for your answers:

  1. The advantage of using schematics: With the schematic, you can automate creating boilerplate code, and you can 'document' the best practice.

  2. You could setup how you want your application/pages etc to be created instead of how Angular thinks what is the best way.

  3. You could do everything without schematics. either by hand or creating your own NodeJS scripts. Schematics just helps you creating the scripts and provides you with an interface and the possibility to do a dry run.

Check out this tutorial: https://medium.com/rocket-fuel/angular-schematics-simple-schematic-76be2aa72850.

user_7034900
Related