Stanimira Vlaeva

Generating code with Angular schematics

Stop writing boilerplate. Learn to build powerful code generators using the same engine that powers the Angular CLI.

Generating code with Angular schematics
#1about 7 minutes

Understanding the problems solved by Angular schematics

Schematics automate repetitive tasks like scaffolding components, configuring libraries with `ng add`, and handling breaking changes with `ng update`.

#2about 2 minutes

Schematics are a framework-agnostic, extensible tool

Although developed by the Angular team, schematics are an open-source tool that can be used with other frameworks like React or for any project transformation task.

#3about 3 minutes

Key benefits of using schematics for project updates

Schematics provide atomic updates by operating on a virtual file system, which prevents leaving projects in a broken state if a script fails.

#4about 2 minutes

Getting started by creating a new schematics collection

Install the Schematics CLI and use the `schematics blank` command to create a new collection, which is defined by a `collection.json` file.

#5about 3 minutes

Exploring the core concepts of the schematics API

Learn about the fundamental building blocks of schematics, including the `Tree`, `Rule`, and `Rule Factory`, and how to pass options to your scripts.

#6about 2 minutes

Performing basic file system operations with schematics

Use the `tree.create()` and `tree.rename()` methods to programmatically add, move, or rename files within your project structure.

#7about 2 minutes

Composing multiple schematics together using chaining

The `chain` utility allows you to execute multiple rules sequentially, enabling composition of both internal and external schematics.

#8about 7 minutes

Using templates for dynamic and reusable file generation

Leverage templates with interpolation and conditional logic to generate dynamic files, using concepts like `Source`, `Rule`, and `mergeWith` to apply them.

#9about 3 minutes

Modifying existing files and a live demo

See how to read an existing file with `tree.read()` and replace its contents using `tree.overwrite()`, demonstrated with a live example.

#10about 2 minutes

Helpful resources for learning more about schematics

Find links to the official documentation, demo repositories, and examples of third-party schematic collections like Clarity and NativeScript.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Articles

View all articles

From learning to earning

Jobs that call for the skills explored in this talk.