> Markdown version of [/videos/129-generating-code-with-angular-schematics](https://www.wearedevelopers.com/videos/129-generating-code-with-angular-schematics). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Generating code with Angular schematics

Stop writing fragile bash scripts for code generation. Angular Schematics leverages a virtual file system to safely automate complex scaffolding and atomic updates across any JavaScript codebase.

- **Speakers:** Stanimira Vlaeva
- **Event:** WeAreDevelopers LIVE
- **Published:** March 25, 2021
- **Duration:** 34:08
- **URL:** https://www.wearedevelopers.com/videos/129-generating-code-with-angular-schematics

## Summary

Angular Schematics offers a powerful, template-based code generator that goes far beyond basic Node or bash scripts by providing a robust virtual file system for safe, atomic updates. Initially built to manage the complex, repetitive scaffolding of standard Angular building blocks—like components, services, and modules—these schematics eliminate manual boilerplate and drastically reduce configuration errors. By executing changes safely in memory first, they ensure that if a complex multi-step operation fails, the project avoids being stuck in a broken, half-modified state.

Library maintainers heavily utilize these tools to streamline user onboarding through commands like ng add for automatic feature configuration (such as generating progressive web app manifests or integrating VMware Clarity UI) and ng update for seamlessly applying breaking change migrations across major versions. The core of a schematic relies on a Tree structure—representing the current state of a workspace alongside pending actions—which is transformed by a series of composable rules. Developers can leverage rule factories, template utilities, and external schematics to chain together sophisticated automated building transformations.

Because operations occur on a virtual file system, testing complex automated tasks becomes remarkably straightforward and deterministic. Furthermore, while deeply integrated with the Angular CLI project, the schematics engine is entirely framework-agnostic. This extensibility empowers developers to orchestrate custom rule templates, execute conditional layout injections, and enforce structural architectural standards across any JavaScript or React codebase without tying their internal deployment generators directly to Angular.

**Keywords:** angular schematics, template-based code generator, virtual file system modifications, atomic codebase updates, angular cli scaffolding, ng add library integrations, ng update migrations, typescript rule factories, composable schematic constraints, automated code formatting, framework-agnostic script generation, automated boilerplate elimination, custom project structuration

## Chapters

1. **Understanding the basics of Angular schematics** (00:16) — An overview of schematics as a template-based code generator for project transformation.
1. **Scaffolding common components and repeating building blocks** (01:30) — How built-in commands eliminate repetitive boilerplate configuration for new files and modules.
1. **Automating library integration and feature setup** (03:25) — Simplifying advanced configuration steps by registering dependencies and integrating features seamlessly.
1. **Handling framework upgrades and breaking changes** (06:38) — Using built-in updates to safely transition structural codebases across major framework releases.
1. **Exploring independent schematic collections for different frameworks** (07:57) — Why schematic libraries are framework-agnostic and how to leverage open-source distributed collections.
1. **Understanding the core advantages of deploying schematics** (09:35) — Creating robust generation scripts using atomic transactions on a virtual file system.
1. **Getting started with the Angular schematics CLI** (13:04) — Setting up an initial collection and running basic scripts using the blank template generator.
1. **Understanding the role of trees and functional rules** (15:33) — The architectural concepts behind capturing a project snapshot and applying recursive functional transformations.
1. **Passing runtime options and handling log messages** (17:42) — Passing execution context variables and printing structured debugging messages globally.
1. **Creating and moving project files with virtual operations** (18:45) — Executing fundamental file system tasks programmatically to instantiate directories efficiently.
1. **Composing multiple schematic scripts into chaining operations** (20:23) — Composing internal and external collections strategically using the standard chaining rule factor.
1. **Generating boilerplate file configurations using parameterized templates** (22:32) — Defining interpolatable source snippets and merging parameterized models directly into targeted local directories.
1. **Modifying the structure and content of existing files** (29:25) — Locating entry point files programmatically to overwrite and customize the layout precisely.
1. **Executing an automated layout replacement with a local script** (30:49) — A short demonstration showcasing an automated local deployment from default templates to structured configurations.
1. **Finding reference materials and community documentation links** (32:21) — Exploring additional repositories and official online resources for refining component migration abilities.

## Related Moments

- [Generating angular applications from basic flow configurations](https://www.wearedevelopers.com/videos/400-generate-customer-journeys-from-reusable-building-blocks) (from "Generate Customer Journeys from reusable Building Blocks")
- [Installing and configuring Angular CDK via schematics](https://www.wearedevelopers.com/videos/189-angular-angular-cdk-awesomeness-combined) (from "Angular <> Angular CDK - Awesomeness Combined")
- [Exploring Angular component patterns and upcoming framework updates](https://www.wearedevelopers.com/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on) (from "Angular tips/tricks you can use from tomorrow on")
- [Adopting Angular source code quality and version best practices](https://www.wearedevelopers.com/videos/685-angular-unleashed-mastering-modern-web-development-with-angular) (from "Angular Unleashed: Mastering Modern Web Development with Angular")
- [Overview of the Angular development platform](https://www.wearedevelopers.com/videos/189-angular-angular-cdk-awesomeness-combined) (from "Angular <> Angular CDK - Awesomeness Combined")
- [Bootstrapping new language projects via CLI generators](https://www.wearedevelopers.com/videos/437-langium-design-your-own-language-in-node-js-and-vs-code) (from "Langium: Design Your Own Language in Node.js and VS Code")

## Related Articles

- [Exploring TypeScript: Benefits for Large-Scale JavaScript Projects](https://www.wearedevelopers.com/magazine/554-exploring-typescript-benefits-for-large-scale-javascript-projects)
- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)
- [How we Build The Software of Tomorrow](https://www.wearedevelopers.com/magazine/120-how-we-build-the-software-of-tomorrow)
- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)

## Related Jobs

- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Senior Software Engineer](https://www.wearedevelopers.com/jobs/ext/15942-senior-software-engineer) at **GitHub**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [AI Software Engineer (Germany)](https://www.wearedevelopers.com/jobs/48317-ai-software-engineer-germany) at **Sunhat**