How Angular Schematics Help Developers Scale Architecture and Team Efficiency

As software engineers, our job isn't just writing features or fixing bugs. We're responsible for improving the processes around software and help teams move faster, safer, and more consistently. That means asking questions like: Can we reduce repetitive tasks? Can we encode best practices so new team members don't guess? Can we lower the mental load of starting new features? For Angular projects, Schematics is one of the best tools to operationalize these improvements. It lets you automate architecture, encode standards, and enforce patterns. What is an Angular Schematic? A schematic in Angular is a set of instructions that tells the Angular CLI how to generate or transform code. Think of it as a script that can: Create new files using templates. Update existing code (e.g. add a component to a module). Enforce consistent project structure and naming. Schematics are part of the Angular DevKit, which powers the Angular CLI under the hood. Angular CLI's Built-in Schematics When you run commands like: ng generate component my-button ng generate module user ng generate service auth You're using the default schematics that come with the Angular CLI. These generate standardized Angular code based on best practices and update related files (e.g. module declarations). Custom Schematics The built-in schematics are great out of the box, but for larger projects, they're often not enough. That's why Angular also has support for custom schematics, that let you define your own scaffolding rules and project structure. Real-World Example #1 - Automating Test Setup In a project, we used an in-house testing framework that wrapped Angular's TestBed with custom setup logic (mocks, utilities, providers). But Angular CLI always generated test files using default Jasmine boilerplate. To avoid always copy-pasting the test setup, I built a schematic that created a spec.ts file with our custom setup: injecting the right testing providers, imports and assert functions. Result: every component came with a ready to use test setup according to our project. It saved us time from rewriting the same test setup in every component, and enforced good practices, making new devs aware of our testing framework. Real-World Example #2 - Feature Architecture In my personal projects, I follow a feature-first architecture, breaking my app into: features: which contain the features of the app. shared: utility code shared across many features. layout: header, sidebars, footer Each feature includes: data-access: services and state management. feature: smart component. ui: dumb components. To support that structure, I created this schematic. It does the following: Creates a new feature folder with subfolders and base files. Adds a service (with HttpClient injection). Creates a smart component with routing set up. Updates tsconfig to support path aliases (e.g., @my-feature), Adds the new route to the central route config, intelligently placing it before the wildcard ** route. It isn't just about saving time, it is about making good architecture easy and hard to deviate from. Conclusion Schematics are one of the rare tools that let you automate both boilerplate and best practices. Codegen isn't just for saving keystrokes. It's about scaling your team's ability to build the right thing the right way. Angular Schematics are a powerful, underused tool that engineers can leverage to: Codify architecture. Reduce onboarding time. Lower error rates. Improve development velocity without chaos. If you're writing architecture docs or review checklists, consider: could this be a schematic instead? Links - How to create a Schematic Angular Schematics Docs The What and How of Angular Schematics Playing with Schematics — Angular Schematics authoring

May 10, 2025 - 22:18

How Angular Schematics Help Developers Scale Architecture and Team Efficiency

As software engineers, our job isn't just writing features or fixing bugs. We're responsible for improving the processes around software and help teams move faster, safer, and more consistently. That means asking questions like:

Can we reduce repetitive tasks?
Can we encode best practices so new team members don't guess?
Can we lower the mental load of starting new features?

For Angular projects, Schematics is one of the best tools to operationalize these improvements. It lets you automate architecture, encode standards, and enforce patterns.

What is an Angular Schematic?

A schematic in Angular is a set of instructions that tells the Angular CLI how to generate or transform code. Think of it as a script that can:

Create new files using templates.
Update existing code (e.g. add a component to a module).
Enforce consistent project structure and naming.

Schematics are part of the Angular DevKit, which powers the Angular CLI under the hood.

Angular CLI's Built-in Schematics

When you run commands like:

ng generate component my-button
ng generate module user
ng generate service auth

You're using the default schematics that come with the Angular CLI. These generate standardized Angular code based on best practices and update related files (e.g. module declarations).

Custom Schematics

The built-in schematics are great out of the box, but for larger projects, they're often not enough. That's why Angular also has support for custom schematics, that let you define your own scaffolding rules and project structure.

Real-World Example #1 - Automating Test Setup

In a project, we used an in-house testing framework that wrapped Angular's TestBed with custom setup logic (mocks, utilities, providers). But Angular CLI always generated test files using default Jasmine boilerplate.

To avoid always copy-pasting the test setup, I built a schematic that created a spec.ts file with our custom setup: injecting the right testing providers, imports and assert functions.

Result: every component came with a ready to use test setup according to our project. It saved us time from rewriting the same test setup in every component, and enforced good practices, making new devs aware of our testing framework.

Real-World Example #2 - Feature Architecture

In my personal projects, I follow a feature-first architecture, breaking my app into:

features: which contain the features of the app.
shared: utility code shared across many features.
layout: header, sidebars, footer

Each feature includes:

data-access: services and state management.
feature: smart component.
ui: dumb components.

To support that structure, I created this schematic.

It does the following:

Creates a new feature folder with subfolders and base files.
Adds a service (with HttpClient injection).
Creates a smart component with routing set up.
Updates tsconfig to support path aliases (e.g., @my-feature),
Adds the new route to the central route config, intelligently placing it before the wildcard ** route.

It isn't just about saving time, it is about making good architecture easy and hard to deviate from.

Conclusion

Schematics are one of the rare tools that let you automate both boilerplate and best practices. Codegen isn't just for saving keystrokes. It's about scaling your team's ability to build the right thing the right way. Angular Schematics are a powerful, underused tool that engineers can leverage to:

Codify architecture.
Reduce onboarding time.
Lower error rates.
Improve development velocity without chaos.

If you're writing architecture docs or review checklists, consider: could this be a schematic instead?