Angular Schematics are powerful tools for transforming your codebase. They are the same technology that powers ng new, ng generate component, and ng add. By creating your own, you can eliminate repetitive tasks, enforce architectural patterns, and ensure your team builds features in a consistent and predictable way.<\/p>\n\n\n\n
This guide will walk you through building a custom schematic from scratch. Our goal is to create a schematic that generates a complete “feature” module, including:<\/p>\n\n\n\n
This automates significant boilerplate and enforces the convention of using feature modules with their own routing.<\/p>\n\n\n\n
The most important concept. A Tree is a virtual representation of your filesystem. Schematics don’t write directly to your disk; they operate on this Tree. They can read, create, update, and delete files within it. Only when the schematic run is successful are the changes from the Tree applied to your real filesystem. This makes operations safe and atomic.<\/p>\n\n\n\n
A Rule is a function that takes a Tree and returns a new Tree. This is the heart of a schematic’s logic. You chain together Rules to perform a series of transformations (e.g., a rule to create files from a template, a rule to modify an existing module, etc.).<\/p>\n\n\n\n
An object that provides context and utilities for a Rule, such as logging and access to the schematic’s collection information.<\/p>\n\n\n\n
A manifest file that describes your set of schematics. It maps a schematic name (e.g., create-feature) to the factory function that executes it and points to a schema file for defining command-line options.<\/p>\n\n\n\n
Schematics use special template files to generate dynamic output. You can use placeholders like <%= variableName %> that get replaced with the options provided by the user.<\/p>\n\n\n\n
First, you need the Schematics CLI.<\/p>\n\n\n\n
npm install -g @angular-devkit\/schematics-cli<\/code><\/pre>\n\n\n\nNow, create a new blank schematics project.<\/p>\n\n\n\n
schematics blank --name=custom-schematics\ncd custom-schematics\nnpm install<\/code><\/pre>\n\n\n\nYour project structure will look like this:<\/p>\n\n\n\n
custom-schematics\/\n\u251c\u2500\u2500 src\/\n\u2502 \u251c\u2500\u2500 collection.json # The manifest for your schematics\n\u2502 \u2514\u2500\u2500 custom-schematics\/ # A sample schematic\n\u2502 \u251c\u2500\u2500 index.js\n\u2502 \u2514\u2500\u2500 index_spec.js\n\u2514\u2500\u2500 package.json<\/code><\/pre>\n\n\n\nLet’s rename the sample schematic to feature and convert the files to TypeScript.<\/p>\n\n\n\n
mv src\/custom-schematics src\/feature\nmv src\/feature\/index.js src\/feature\/index.ts\nmv src\/feature\/index_spec.js src\/feature\/index_spec.ts<\/code><\/pre>\n\n\n\nStep 2: Define the Schematic in collection.json<\/h3>\n\n\n\n
This file is the entry point for the Angular CLI. Update src\/collection.json to describe our new feature schematic.<\/p>\n\n\n\n
{\n \"$schema\": \"..\/node_modules\/@angular-devkit\/schematics\/collection-schema.json\",\n \"schematics\": {\n \"feature\": {\n \"description\": \"Generates a new feature module with a component, service, and routing.\",\n \"factory\": \".\/feature\/index#feature\",\n \"schema\": \".\/feature\/schema.json\"\n }\n }\n}<\/code><\/pre>\n\n\n\n\n- “feature”: The name of our schematic (ng generate feature …).<\/li>\n\n\n\n
- “factory”: Points to the main factory function (feature) inside index.ts.<\/li>\n\n\n\n
- “schema”: Points to a JSON schema file where we’ll define the available command-line options.<\/li>\n<\/ul>\n\n\n\n
Step 3: Define the User Options in schema.json<\/h3>\n\n\n\n
Create a new file src\/feature\/schema.json. This file defines the parameters our schematic will accept, like –name.<\/p>\n\n\n\n
{\n \"$schema\": \"http:\/\/json-schema.org\/schema\",\n \"id\": \"FeatureSchematic\",\n \"title\": \"Feature Schematic\",\n \"type\": \"object\",\n \"properties\": {\n \"name\": {\n \"type\": \"string\",\n \"description\": \"The name of the feature.\",\n \"$default\": {\n \"$source\": \"argv\",\n \"index\": 0\n },\n \"x-prompt\": \"What is the name of the feature?\"\n },\n \"path\": {\n \"type\": \"string\",\n \"description\": \"The path to create the feature in.\",\n \"default\": \"app\/features\"\n }\n },\n \"required\": [\n \"name\"\n ]\n}<\/code><\/pre>\n\n\n\n\n- name<\/strong>: The feature’s name (e.g., “orders”, “profile”).\n
\n- $source: “argv”, index: 0 means the first argument passed in the command line will be used as the name (e.g., ng g feature my-feature).<\/li>\n\n\n\n
- x-prompt provides a nice interactive prompt if the name isn’t supplied.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- path<\/strong>: Where to place the new feature folder. We default it to app\/features.<\/li>\n<\/ul>\n\n\n\n
We also need a schema.d.ts file to get TypeScript typings for our options. Create src\/feature\/schema.d.ts:<\/p>\n\n\n\n
export interface Schema {\n \/**\n * The name of the feature.\n *\/\n name: string;\n \/**\n * The path to create the feature in.\n *\/\n path: string;\n}<\/code><\/pre>\n\n\n\nStep 4: Create the Template Files<\/h3>\n\n\n\n
This is the boilerplate we want to generate. Create a files folder inside src\/feature. The special __name@dasherize__ syntax will be replaced with the dasherized version of the name option (e.g., “my-feature”).<\/p>\n\n\n\n
src\/feature\/files\/\n\u2514\u2500\u2500 __name@dasherize__\/\n \u251c\u2500\u2500 __name@dasherize__.component.html\n \u251c\u2500\u2500 __name@dasherize__.component.scss\n \u251c\u2500\u2500 __name@dasherize__.component.spec.ts\n \u251c\u2500\u2500 __name@dasherize__.component.ts\n \u251c\u2500\u2500 __name@dasherize__.module.ts\n \u251c\u2500\u2500 __name@dasherize__-routing.module.ts\n\u2514\u2500\u2500 __name@dasherize__.service.ts<\/code><\/pre>\n\n\n\nExample Template File:<\/strong><\/p>\n\n\n\nNotice the use of <%= … %> templating syntax. The classify and dasherize functions are helpers we’ll use in our logic.<\/p>\n\n\n\n
import { NgModule } from '@angular\/core';\nimport { CommonModule } from '@angular\/common';\n\nimport { <%= classify(name) %>RoutingModule } from '.\/<%= dasherize(name) %>-routing.module';\nimport { <%= classify(name) %>Component } from '.\/<%= dasherize(name) %>.component';\nimport { <%= classify(name) %>Service } from '.\/<%= dasherize(name) %>.service';\n\n@NgModule({\n declarations: [\n <%= classify(name) %>Component\n ],\n imports: [\n CommonModule,\n <%= classify(name) %>RoutingModule\n ],\n providers: [\n <%= classify(name) %>Service\n ]\n})\nexport class <%= classify(name) %>Module { }<\/code><\/pre>\n\n\n\nExample Template File:<\/strong><\/p>\n\n\n\nimport { NgModule } from '@angular\/core';\nimport { RouterModule, Routes } from '@angular\/router';\nimport { <%= classify(name) %>Component } from '.\/<%= dasherize(name) %>.component';\n\nconst routes: Routes = [{ path: '', component: <%= classify(name) %>Component }];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule]\n})\nexport class <%= classify(name) %>RoutingModule { }<\/code><\/pre>\n\n\n\nStep 5: Write the Main Schematic Logic in index.ts<\/h3>\n\n\n\n
This is where everything comes together. Replace the content of src\/feature\/index.ts with the following:<\/p>\n\n\n\n
import {\n Rule,\n SchematicContext,\n Tree,\n apply,\n url,\n template,\n move,\n chain,\n mergeWith,\n} from '@angular-devkit\/schematics';\nimport { strings } from '@angular-devkit\/core';\nimport { Schema } from '.\/schema';\nimport { addRouteDeclarationToNgModule } from '@schematics\/angular\/utility\/ast-utils';\nimport { InsertChange } from '@schematics\/angular\/utility\/change';\nimport * as ts from 'typescript';\n\n\/\/ Function to add the new route to app-routing.module.ts\nfunction addRouteToNgModule(options: Schema): Rule {\n return (tree: Tree, _context: SchematicContext) => {\n const appRoutingModulePath = 'src\/app\/app-routing.module.ts';\n const featureName = options.name;\n const featurePath = `${options.path}\/${strings.dasherize(featureName)}\/${strings.dasherize(featureName)}.module`;\n\n const text = tree.read(appRoutingModulePath);\n if (!text) {\n _context.logger.error(`Could not find ${appRoutingModulePath}.`);\n return tree;\n }\n\n const sourceText = text.toString('utf-8');\n const sourceFile = ts.createSourceFile(\n appRoutingModulePath,\n sourceText,\n ts.ScriptTarget.Latest,\n true\n );\n\n const route = `{\n path: '${strings.dasherize(featureName)}',\n loadChildren: () => import('.\/features\/${strings.dasherize(featureName)}\/${strings.dasherize(featureName)}.module').then(m => m.${strings.classify(featureName)}Module)\n }`;\n\n \/\/ Use AST utils to find the routes array and insert the new route\n const changes = addRouteDeclarationToNgModule(\n sourceFile,\n appRoutingModulePath,\n route\n );\n\n const recorder = tree.beginUpdate(appRoutingModulePath);\n for (const change of changes) {\n if (change instanceof InsertChange) {\n recorder.insertLeft(change.pos, change.toAdd);\n }\n }\n tree.commitUpdate(recorder);\n\n return tree;\n };\n}\n\n\/\/ Main factory function\nexport function feature(_options: Schema): Rule {\n return (_tree: Tree, _context: SchematicContext) => {\n\n const templateSource = apply(url('.\/files'), [\n template({\n ..._options,\n ...strings, \/\/ Provides classify, dasherize, etc. to templates\n }),\n move(_options.path),\n ]);\n\n \/\/ Chain the two rules together\n return chain([\n mergeWith(templateSource),\n addRouteToNgModule(_options)\n ]);\n };\n}<\/code><\/pre>\n\n\n\nExplanation of the logic:<\/h2>\n\n\n\nFunction \/ Concept<\/strong><\/td>Purpose \/ Explanation<\/strong><\/td><\/tr>function<\/strong><\/td>Main schematic factory where the rule chain is defined.<\/td><\/tr> url(‘.\/files’)<\/strong><\/td>Reads template files from the .\/files directory. These are the files to scaffold.<\/td><\/tr> template({…})<\/strong><\/td>Replaces placeholders like <%= %> in the templates using user inputs and utility functions (classify, dasherize).<\/td><\/tr> move(…)<\/strong><\/td>Moves generated files to the path specified by the user (typically project structure).<\/td><\/tr> chain([…])<\/strong><\/td>Executes multiple Rules in order. Used here to generate files and then modify routing module.<\/td><\/tr> Rule (custom)<\/strong><\/td>A custom rule to edit an existing file (app-routing.module.ts).<\/td><\/tr> Reads app-routing.module.ts<\/strong><\/td>Accesses the routing module to inject new route information.<\/td><\/tr> Uses TypeScript AST<\/strong><\/td>Uses the Abstract Syntax Tree to safely parse and modify code (more accurate than regex).<\/td><\/tr> addRouteDeclarationToNgModule<\/strong><\/td>Utility from @schematics\/angular to help inject new routes into the NgModule.<\/td><\/tr> InsertChange<\/strong><\/td>A type of change object that represents text insertion. It’s applied to the file via the Tree.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nStep 6: Build and Test the Schematic<\/h3>\n\n\n\n1. Build the Schematic<\/h4>\n\n\n\nnpm run build<\/code><\/pre>\n\n\n\n2. Link for Local Testing:<\/h4>\n\n\n\n
From inside your custom-schematics<\/strong> directory:<\/p>\n\n\n\nnpm link<\/code><\/pre>\n\n\n\nThen, in your test Angular project:<\/p>\n\n\n\n
cd ..\/path\/to\/your\/angular-app\n# Link the global schematic to this project\nnpm link custom-schematics<\/code><\/pre>\n\n\n\n3. Run the Schematic :<\/h4>\n\n\n\n<\/ol>\n\n\n\nNow you can run your custom schematic just like any other<\/p>\n\n\n\n
ng generate custom-schematics:feature orders<\/code><\/pre>\n\n\n\nOr, if you set it as the default collection in angular.json :<\/p>\n\n\n\n
ng generate feature profile --path=app\/user<\/code><\/pre>\n\n\n\nAfter running, you will see a new orders folder inside app\/features, fully populated with your component, service, and modules. More importantly, your app-routing.module.ts will have been automatically updated with the new lazy-loaded route, saving you time and preventing errors.<\/p>\n\n\n\n
Final Words<\/h2>\n\n\n\n
With your custom Angular schematic ready, generating feature modules is quick and error-free. It includes routing, services, and components, streamlines development, enforces consistency, and saves time. This approach is especially useful for teams or businesses looking to <\/strong>hire Angular developers<\/a> and maintain scalable, well-structured projects.<\/p>\n","protected":false},"excerpt":{"rendered":"Angular Schematics are powerful tools for transforming your codebase. They are the same technology that powers ng new, ng generate component, and ng add. By creating your own, you can eliminate repetitive tasks, enforce architectural patterns, and ensure your team builds features in a consistent and predictable way. This guide will walk you through building […]<\/p>\n","protected":false},"author":2,"featured_media":2357,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,3],"tags":[],"class_list":["post-2354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=2354"}],"version-history":[{"count":3,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2354\/revisions"}],"predecessor-version":[{"id":2359,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/2354\/revisions\/2359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/2357"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=2354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=2354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=2354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}