Getting Started with Angular Schematics

Getting Started with Angular Schematics

Learn what Schematics are and how to create your first one.

Matthew Ridderikhoff

I’m on windows 10 and x-prompt works when i run my schematic in it’s project (.:my-schematic) but not when I npm link it (ng g my-schematic:my-schematic). Same goes for ng add @oktadev/schematics.

I DO see the prompts when running the command in Command Prompt instead of Git Bash.
Any idea why this isn’t working for me?

Matt Raible

What error do you see? Is it just that the prompt doesn’t happen?

Matthew Ridderikhoff

The prompt just don’t appear. If it’s a required field that is supposed to be prompted and it has no default value, i get “schematic input does not validate against the schema”.

Oddly enough the prompts DO work in the Command Prompt. Seems like it’s an issue with Git Bash…

Mike Ritchie

Is there any way to do this for other verbs too? I tried the same naming for “ng generate” but I have to write the command as “ng generate myPackage:ng-generate”

Matt Raible

I don’t think there’s anyway to override ng generate. You’ll have to use the full name of your schematic when running with ng generate or schematics. You can make it so you can run ng add $yourSchematic.

rahul bawa

I learnt so much from this blog post. Thanks a lot.

I want to understand how the modify operation will be done while adding the new component (generated via our schematics) into the existing module.ts file ?

Matt Raible

You can use schematics-utilities to modify an existing module.ts file, specifically in angular/ast-utils. For instance, there’s what it looks like to add imports to the main module.

rahul bawa

Thanks, this is what I was looking for. So you learnt all this looking the angular schematics code base or is there any reference blog posts that you use ? I actually about it via your and Tomas Trajan’s talk in Angular zurich on youtube.

Lastly, If I face some more issues, should I just keep writing them here or can I ping you somewhere else as well ?

Matt Raible

I learned some of it looking through Angular CLI’s schematics and the rest from the blog posts I referenced at the bottom of this post. If you face issues writing your own schematic, you’ll likely get more help from posting your question to Stack Overflow and tagging it with “angular-schematics”. I watch that tag so I can try to help if I know the answer.

Omar AlJaber

Big thank for the video, but suppose I want to add extra folder in the files folder and I want to render it conditionally according to param I am sending is it possible