1

Not sure to fully understand a concept with Angular Schematics. More precisly how to execute a schematic. Reading from some articles, I saw that we have to use ng g my-schematics-collection:simple-schematic --name="some name". In other articles I saw schematics my-schematics-collection:simple-schematic --name="Angular Community". And again using NX, they simple use ng g component, exactly like the base Angular Schematics to create a component. How can they overwrite the existing Angular Schematics? The fact that they doesn't point to their own schematics collection confuses me.

Can someone explain what to use for what use cases? Thanks!

KevinTale
  • 1,658
  • 3
  • 25
  • 47

2 Answers2

1

Angular schematics is just a library. There are different tools that use the library. You can read more about what is expected from the tooling in the docs.

When using ng g my-schematics-collection:simple-schematic --name="some name" you are using the tooling provided by angular-cli.

When using schematics my-schematics-collection:simple-schematic --name="Angular Community" you are using the reference cli tooling.

Both tools leverage nodejs module resolution to find schematic files. So my-schematics-collection is actually a name of a node_module. For example the default angular schematics are defined in this module. Notice that in the package.json there's a key called schematics. It will point to a json configuration file.

So in general if you are using Angular, stick with the angular-cli tooling. If you are developing custom schematics, the reference CLI is useful for testing. If you don't mind writing some custom tooling, then you can just import the library directly.

shusson
  • 5,542
  • 34
  • 38
1

It's very easy to understand, when you are development the schematics you would like to test your schematic using the schematics word and you need to specify these stuff: schematics [schematic-path-of-your-project]:[schematic-name] --[flags]

For example:

  1. schematics .:add-custom-component --debug=false --> this if you are creating a project like library and you would like to test inside the project.

  2. schematics ./projects/schematics:add-custom-component --debug=false --> this if you are creating the schematics inside your angular project.

However, when you already finished your schematics you need to do different things depends on if you are creating a library or creating schematics inside the project:

  1. If you are creating a Schematics like a library you need to create an schematic named: ng-add, when you are in the project that you want to add it, you need to execute: ng add @hyperxq/schematics;
  2. If you are creating a schematic inside your project you need to compile the schematic and in your angular project execute: npm link ./projects/schematics/dist. After that you need only to execute: ng g @hyperxq/schematics:add-custom-component.

:) I hope that help you to understand schematics.

Daniel Barrientos
  • 92
  • 3