Angular Schematics

Use ng generate, configure angular.json defaults, and author custom schematics for consistent code generation across a team

When to Use

• Scaffolding components, services, pipes, guards, and other Angular artifacts with the CLI
• Configuring

  angular.json

  to set project-wide defaults (standalone, OnPush, flat file structure)
• Applying Angular migration schematics to upgrade between major versions
• Authoring custom schematics to enforce team conventions in code generation
• Using third-party schematics from libraries (Angular Material, NgRx, Spectator)

Instructions

1. Use

   ng generate component <name>

   (shorthand:

   ng g c <name>

   ) to scaffold components. Add flags for common options:

   --standalone

   ,

   --change-detection OnPush

   ,

   --skip-tests

   ,

   --flat

   .
2. Set schematic defaults in

   angular.json

   under

   projects.<name>.schematics

   so flags are applied automatically without typing them every time.
3. Use

   ng generate @angular/core:standalone

   to migrate an NgModule-based project to standalone components. Run the migration in three phases (convert, remove modules, switch bootstrap).
4. Use

   ng update

   to update Angular and its dependencies with automatic migration schematics. Always run

   ng update @angular/core @angular/cli

   together.
5. Use

   ng generate environments

   to scaffold environment files in Angular 15+.
6. For library schematics, install the library first (

   ng add @angular/material

   ), which runs its own

   ng-add

   schematic for automatic setup.
7. Author custom schematics as TypeScript functions using the

   @angular-devkit/schematics

   package. A schematic receives a

   Tree

   (virtual file system) and

   SchematicContext

   and returns a

   Rule

   .

# Common generation commands
ng generate component features/products/product-list --standalone --change-detection OnPush
ng generate service core/services/auth
ng generate guard core/guards/auth --functional
ng generate pipe shared/pipes/truncate --standalone
ng generate directive shared/directives/highlight --standalone
ng generate resolver features/products/product --functional
ng generate interceptor core/interceptors/auth --functional

# Generate with alias shortcuts
ng g c features/dashboard --standalone
ng g s services/cart
ng g p shared/pipes/format-bytes --standalone --flat

// angular.json — set schematic defaults for the project
{
  "projects": {
    "my-app": {
      "schematics": {
        "@schematics/angular:component": {
          "standalone": true,
          "changeDetection": "OnPush",
          "style": "scss",
          "flat": false
        },
        "@schematics/angular:directive": {
          "standalone": true
        },
        "@schematics/angular:pipe": {
          "standalone": true
        },
        "@schematics/angular:guard": {
          "functional": true
        },
        "@schematics/angular:interceptor": {
          "functional": true
        }
      }
    }
  }
}

# Angular version upgrade
ng update @angular/core@17 @angular/cli@17

# Migrate to standalone
ng generate @angular/core:standalone
# Phase 1: Convert components/directives/pipes to standalone
# Phase 2: Remove unnecessary NgModules
# Phase 3: Switch to bootstrapApplication

# Apply NgRx schematics
ng generate @ngrx/schematics:store AppState --root --module app.module.ts
ng generate @ngrx/schematics:feature products --module features/products/products.module.ts

// Custom schematic — basic structure
// schematics/my-feature/index.ts
import {
  Rule,
  SchematicContext,
  Tree,
  url,
  apply,
  template,
  move,
  mergeWith,
} from '@angular-devkit/schematics';
import { strings } from '@angular-devkit/core';

export function myFeature(options: { name: string; path: string }): Rule {
  return (tree: Tree, context: SchematicContext) => {
    const templateSource = apply(
      url('./files'), // template files directory
      [
        template({
          ...strings, // dasherize, classify, camelize, etc.
          ...options,
          name: options.name,
        }),
        move(options.path),
      ]
    );

    return mergeWith(templateSource)(tree, context);
  };
}

Details

angular.json

structure overview:

angular.json
└── projects
    └── <project-name>
        ├── architect
        │   ├── build       — build config (outputPath, assets, fileReplacements)
        │   ├── serve       — dev server config (port, proxy, open)
        │   ├── test        — test runner config (karma/jest)
        │   └── lint        — eslint config
        └── schematics      — default options for ng generate

fileReplacements

for environments:

"configurations": {
  "production": {
    "fileReplacements": [
      { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" }
    ]
  }
}

Proxy configuration for dev server: Create

proxy.conf.json

and reference it in

angular.json

under

serve.options.proxyConfig

:

{ "/api": { "target": "http://localhost:3000", "secure": false, "changeOrigin": true } }

Custom schematic templates: Files in the

files/

directory use EJS-style template syntax for file name and content interpolation:

files/
  __name@dasherize__.component.ts.template
  __name@dasherize__.component.html.template

<% classify(name) %>

in the file content becomes

MyFeature

. The

strings

helper from

@angular-devkit/core

provides

camelize

,

classify

,

dasherize

,

underscore

, and

capitalize

.

ng add

schematics: Third-party packages run setup logic on install (

ng add @angular/material

). They can modify

angular.json

,

package.json

, and source files automatically. Review the schematic's changes in git diff before committing.

Migration schematics: Angular major version migrations run as schematics that automatically update APIs, rename symbols, and transform code patterns. Running

ng update

without

--force

performs a dry-run first, showing what would change.

Source

https://angular.dev/tools/cli/schematics

Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

Harness Integration

• Type: knowledge — this skill is a reference document, not a procedural workflow.
• No tools or state — consumed as context by other skills and agents.

Success Criteria

• The patterns described in this document are applied correctly in the implementation.
• Edge cases and anti-patterns listed in this document are avoided.