Angular Schematics & Custom Builders

Q: What is an Angular schematic and how does it relate to the ng generate command?

A schematic is a template based code generator that the Angular CLI uses to create new files, such as components and services, following consistent naming and structure rules. Every time you run a command like ng generate component, you are actually running a built in schematic behind the scenes.

Q: How would you create a custom schematic to generate a component following your own team's specific conventions?

You create a new schematic project using the Angular schematics CLI tools, define a rule function that describes what files to create and how to transform them, and package it as an npm library that your team can install and run using ng generate.

Q: What is an Angular CLI builder, and how does it differ from a schematic?

A schematic generates or modifies source code files, while a builder actually performs a task using your project's code, such as building it for production, running tests, or deploying it somewhere. Builders are what power commands like ng build and ng test behind the scenes.

Q: How would you use Angular's automatic update schematics to upgrade a project to a new major version?

Running ng update with the Angular package name automatically applies migration schematics that update your code to match breaking changes in the new version, such as renaming APIs or adjusting configuration files, saving significant manual work compared to reading through changelogs and fixing everything by hand.

Q: Why might a company create their own internal Angular schematics library?

Creating internal schematics helps a company enforce consistent code patterns, folder structures, and best practices automatically across many different teams and projects, reducing the chance of inconsistent code style and saving developers from repeating the same manual setup steps every time.

5 questions found

What is an Angular schematic and how does it relate to the ng generate command?

Beginner

A schematic is a template based code generator that the Angular CLI uses to create new files, such as components and services, following consistent naming and structure rules. Every time you run a command like ng generate component, you are actually running a built in schematic behind the scenes.

ng generate component user-profile
// This runs the built in @schematics/angular component schematic
// which creates the .ts, .html, and .spec.ts files following Angular conventions

Real-world example A team relies on the built in component schematic every time they add a new feature, ensuring every component in their codebase follows the exact same consistent file naming and folder structure automatically.

Common follow-ups: Can schematics do more than just generate new files, such as modifying existing ones?;Where do the built in Angular schematics actually come from?

Angular CLI & Project Structure;Standalone Components

How would you create a custom schematic to generate a component following your own team's specific conventions?

Advanced

You create a new schematic project using the Angular schematics CLI tools, define a rule function that describes what files to create and how to transform them, and package it as an npm library that your team can install and run using ng generate.

// A simplified custom schematic rule function
export function myComponent(options: any): Rule {
  return (tree: Tree, context: SchematicContext) => {
    const templateSource = apply(url('./files'), [template({ ...options })]);
    return chain([mergeWith(templateSource)])(tree, context);
  };
}

Real-world example A large company builds a custom schematic that generates a new component pre wired with their specific logging setup and testing patterns, ensuring every new component across dozens of teams starts with the same consistent foundation.

Common follow-ups: How do you test a custom schematic before publishing it to your team?;How would you add custom command line options to your schematic, similar to how ng generate component accepts flags?

Angular CLI & Project Structure;Testing with Jasmine & Karma

What is an Angular CLI builder, and how does it differ from a schematic?

Intermediate

A schematic generates or modifies source code files, while a builder actually performs a task using your project's code, such as building it for production, running tests, or deploying it somewhere. Builders are what power commands like ng build and ng test behind the scenes.

// angular.json referencing a builder for the build target
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": { "outputPath": "dist/my-app" }
}

Real-world example A team writes a custom builder that automatically uploads their built app to a cloud storage bucket after every successful production build, extending the standard ng build process with their own deployment step.

Common follow-ups: How would you create your own custom builder from scratch?;What other built in builders does the Angular CLI provide besides build and test?

Build Environments & Deployment;Angular CLI & Project Structure

How would you use Angular's automatic update schematics to upgrade a project to a new major version?

Intermediate

Running ng update with the Angular package name automatically applies migration schematics that update your code to match breaking changes in the new version, such as renaming APIs or adjusting configuration files, saving significant manual work compared to reading through changelogs and fixing everything by hand.

ng update @angular/core @angular/cli

// Automatically updates dependencies and runs any needed migration schematics
// to adjust your code for breaking changes in the new version

Real-world example A team upgrading from an older Angular version to the latest one runs ng update, which automatically fixes several breaking changes in their configuration files, saving hours of manual migration work.

Common follow-ups: What happens if a migration schematic cannot fully automate a specific breaking change?;How do you check what version of Angular a project can safely update to next?

Angular CLI & Project Structure;Build Environments & Deployment

Why might a company create their own internal Angular schematics library?

Beginner

Creating internal schematics helps a company enforce consistent code patterns, folder structures, and best practices automatically across many different teams and projects, reducing the chance of inconsistent code style and saving developers from repeating the same manual setup steps every time.

// Example command a company's internal schematic might provide
ng generate @my-company/schematics:feature-module orders
// Automatically creates a fully structured feature module following company standards

Real-world example A large enterprise creates an internal schematics package that generates new feature modules pre configured with their required logging, error handling, and testing setup, ensuring consistency across dozens of internal teams.

Common follow-ups: How do you distribute a custom schematics library across an organization?;What is the maintenance cost of keeping custom schematics updated as Angular itself evolves?

Angular Style Guide & Best Practices;Standalone Components