4

How do I add custom angular component schematics to existing project?

I would like to have e.g. my-page component templates that will replicate existing \node_modules\@schematics\angular\component\ files but with edited templates.

I expect it to be achievable through angular-cli e.g. ng g my-page pagename command with schematics attribute.

Currently I modified code for existing angular's schematics under \node_modules\ so this works fine for me (until next package installation) but I would like to share this with the team so everyone will use predefined templates that will be stored in e.g. src\team-schematics\.

How do I achieve this?

I tried to create new schematic via schematics schematic --name my-schematic, copied angular schematic into \ClientApp\src\app\my-schematic\\ and trying to launch $ ng generate my-page --collection \ClientApp\src\app\my-schematic but no luck as of now:

Error: Could not find module "\\ClientApp\\src\\app\\my-schematic\\" from "C:\\Users\\xxx\\Projects\\yyy

danronmoon
  • 3,814
  • 5
  • 34
  • 56
godblessstrawberry
  • 4,556
  • 2
  • 40
  • 58
  • I follow this https://medium.com/rocket-fuel/angular-schematics-simple-schematic-76be2aa72850. After you has the schematic don't forget build it: **npm run build**, and in the directory of your new app make a **npm link path-too-your-schematic**, then You can do the **ng g simple-schematic:simple-schematic --name="some name"**. NOTE: I need to make **npm install** before build the schematic – Eliseo Jan 29 '19 at 19:30
  • IMO @Eliseo 's comment should be accepted answer. – MTJ Jan 30 '19 at 06:48
  • @Eliseo following that article I am getting an error `Cannot find schematic X in collection X-collection` – Kyle V. Jan 30 '19 at 15:19
  • I download the github: https://github.com/jonbcampos/schematics and work for me (Angular 7). I don't know what can happens, by the way check packgaje.json and collection.json – Eliseo Jan 30 '19 at 15:36
  • I created a custom schematic named schematics and if I wanna generate it with `ng g schematics:schematics --name my-name` it doesn’t generate anything. – laprof Jun 24 '19 at 08:46
  • Maybe this guide can help you: https://indepth.dev/posts/1438/extend-angular-schematics-to-customize-your-development-process – shhdharmen Mar 13 '21 at 08:08

2 Answers2

0

You shouldn't modify core schematics. On the other hand, you can create your own schematic.

Creating the schematic is a step-by-step process. You can find the same at Schematics — An Introduction.

shhdharmen
  • 1,413
  • 10
  • 20
  • Whoever downvoted my post, thanks for your time and vote. It would be really great if you can add a comment about how can I improve my answer. – shhdharmen Jan 30 '19 at 17:43
  • 1
    I didn't, but I'd imagine it's twofold: 1. your answer is basically just the link, but you should have _something_ more so it's not just a redirect (https://stackoverflow.com/help/how-to-answer). And 2. that link is about generating a new schematic project, not adding one within an existing project. – John Neuhaus Mar 12 '21 at 17:09
-1

As for as Angular CLI we can only have one Schematics. Might be you can create custom schmatics '@foo/schematics' and extends the @angular/schematics in angular.json and customize the schematics based on your needs.

ng new C myComponent --collection=@foo/schematics
Suresh Kumar Ariya
  • 9,516
  • 1
  • 18
  • 27