Guide to custom Angular Schematics

Rationale behind using Schematics

What the heck is Schematics, after all?

Creating a new Schematic

npm install -g @angular-devkit/schematics-cli
schematics blank --name=angular-schematics
  • collection.json is like an index of the schematics in this project. It links the name of each schematic with the code that runs it.
  • sample-schematics-project/index.ts is the code run by our schematic.
"scripts": {
"build": "tsc -p tsconfig.json",
"watch": "tsc -p tsconfig.json --watch",


Getting User Input

  1. String
  2. Number
  3. Boolean
  4. enum
Asking for user input

Calling “ng new” Schematic

Calling ng new schematic

Calling a custom Schematic and creating custom rules

Update package.json

Read package.json
Updating package.json

Run the Schematic

schematics ./new-project/src/collection.json:angular-schematic new-app

Publish our Schematic




Web Developer, loves to write about UI technologies

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium


Hot reloading with React and Flask

A web browser opened to http://localhost:5000/app/  rendering a sample React application.

React-native monorepo with shared code and hooks

service.ts:171 POST http://localhost:5001/[myendpoint- 500 (Internal Server Error)

The Best NodeJS Frameworks for 2019

Quizzes for Interview— JavaScript & DataStructure Algo

suggesting pastors preach on the Bible from the pulpit and speak with parishioners aside from…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anjali Verma

Anjali Verma

Web Developer, loves to write about UI technologies

More from Medium

How to Debug Angular Applications in Visual Studio Code

What to learn first React or Angular?

Working with RxJS without subscribing — RxJS in Practice #2

VS Code Configuration for .NET/Angular Projects