or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ast-utilities.mddependency-management.mdindex.mdschematics.mdstandalone-utilities.mdworkspace-utilities.md
tile.json

tessl/npm-schematics--angular

Angular schematics collection providing code generators for Angular applications, components, services, and other constructs.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@schematics/angular@20.2.x

To install, run

npx @tessl/cli install tessl/npm-schematics--angular@20.2.0

index.mddocs/

@schematics/angular

@schematics/angular provides a comprehensive collection of Angular schematics (code generators) for creating and scaffolding Angular applications, components, services, and other constructs. This package serves as the foundation for Angular CLI's code generation capabilities, offering standardized templates and automated code creation that follows Angular best practices.

Package Information

  • Package Name: @schematics/angular
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @schematics/angular or ng add @schematics/angular

Core Imports

import { Rule, Tree, SchematicContext } from '@angular-devkit/schematics';

For utility functions:

import { 
  readWorkspace, 
  updateWorkspace,
  addDependency,
  DependencyType
} from '@schematics/angular/utility';

For CommonJS (not recommended):

const { readWorkspace, updateWorkspace } = require('@schematics/angular/utility');

Basic Usage

import { Rule, Tree, SchematicContext } from '@angular-devkit/schematics';
import { readWorkspace, updateWorkspace } from '@schematics/angular/utility';

// Example schematic rule
export function myCustomSchematic(): Rule {
  return async (tree: Tree, context: SchematicContext) => {
    // Read Angular workspace configuration
    const workspace = await readWorkspace(tree);
    
    // Modify workspace or generate files
    tree.create('new-file.ts', 'export const greeting = "Hello World";');
    
    // Update workspace if needed
    return updateWorkspace((workspace) => {
      // Workspace modifications
    });
  };
}

Architecture

@schematics/angular is built around several key components:

  • Schematic Collection: 24 schematics for generating Angular code (20 public + 4 hidden/internal)
  • Utility Libraries: Comprehensive functions for workspace management, AST manipulation, and file operations
  • Schema System: JSON Schema-based configuration for all schematics with TypeScript type generation
  • Migration System: 6 migration schematics for seamless Angular version upgrades and breaking change handling
  • Template Engine: File template system with variable substitution and conditional generation

Capabilities

Schematic Generators

Code generation schematics for creating Angular applications and components. These are the primary entry points used by Angular CLI commands like ng generate component.

// Main schematic factory interface
type SchematicFactory<T> = (options: T) => Rule;

// Core generator schematics
declare const application: SchematicFactory<ApplicationSchema>;
declare const component: SchematicFactory<ComponentSchema>;  
declare const service: SchematicFactory<ServiceSchema>;
declare const module: SchematicFactory<ModuleSchema>;

Schematics

Workspace Utilities

Utilities for reading, modifying, and managing Angular workspace configurations and project structures.

function readWorkspace(tree: Tree, path?: string): Promise<WorkspaceDefinition>;
function updateWorkspace(updater: (workspace: WorkspaceDefinition) => void | PromiseLike<void>): Rule;
function writeWorkspace(workspace: WorkspaceDefinition, tree: Tree, path?: string): void;

interface WorkspaceDefinition {
  projects: Map<string, ProjectDefinition>;
  extensions: Record<string, JsonValue>;
}

interface ProjectDefinition {
  root: string;
  sourceRoot?: string;
  targets: Map<string, TargetDefinition>;
  extensions: Record<string, JsonValue>;
}

Workspace Utilities

Dependency Management

Functions for managing package.json dependencies within schematics, including adding, removing, and modifying npm packages.

function addDependency(options: AddDependencyOptions): Rule;

interface AddDependencyOptions {
  type: DependencyType;
  name: string;
  version: string;
  registry?: string;
  installBehavior?: InstallBehavior;
  existingBehavior?: ExistingBehavior;
}

enum DependencyType {
  Default = 'dependencies',
  Dev = 'devDependencies', 
  Peer = 'peerDependencies'
}

Dependency Management

AST Manipulation

Utilities for parsing, analyzing, and modifying TypeScript Abstract Syntax Trees (AST) to programmatically update Angular code. These are not exported from the main utility index and must be imported directly.

// Import from specific utility modules
import { findNode } from '@schematics/angular/utility/ast-utils';
import { addImportToModule } from '@schematics/angular/utility/ast-utils';
import { Change } from '@schematics/angular/utility/change';

AST Utilities

Standalone Application Support

Utilities for working with Angular's standalone components and bootstrap configuration, supporting the modern Angular application architecture.

function addRootImport(options: AddRootImportOptions): Rule;
function addRootProvider(options: AddRootProviderOptions): Rule;

interface AddRootImportOptions {
  import: string;
  from: string;
  project?: string;
}

interface AddRootProviderOptions {
  expression: string;
  import?: string;
  from?: string;
  project?: string;
}

Standalone Utilities

Types

Core Types

// Re-exported from @angular-devkit/schematics
type Rule = (tree: Tree, context: SchematicContext) => Tree | Observable<Tree> | Rule | Promise<Rule | Tree | Observable<Tree>> | void;

interface Tree {
  exists(path: string): boolean;
  read(path: string): Buffer | null;
  readText(path: string): string;
  create(path: string, content: Buffer | string): void;
  overwrite(path: string, content: Buffer | string): void;
  rename(from: string, to: string): void;
  delete(path: string): void;
}

interface SchematicContext {
  readonly schematic: Schematic<any, any>;
  readonly strategy: MergeStrategy;
  readonly interactive: boolean;
  addTask<T>(task: TaskConfiguration<T>, dependencies?: Array<TaskId>): TaskId;
}

Workspace Types

interface TargetDefinition {
  builder: string;
  defaultConfiguration?: string;
  configurations?: Record<string, Record<string, JsonValue>>;
  options?: Record<string, JsonValue>;
}

enum ProjectType {
  Application = 'application',
  Library = 'library'
}

enum AngularBuilder {
  Application = '@angular-devkit/build-angular:application',
  Browser = '@angular-devkit/build-angular:browser',
  DevServer = '@angular-devkit/build-angular:dev-server',
  Karma = '@angular-devkit/build-angular:karma',
  Protractor = '@angular-devkit/build-angular:protractor',
  Extract = '@angular-devkit/build-angular:extract-i18n',
  NgPackagr = 'ng-packagr:build'
}

Additional Types

// Location type for file generation
interface Location {
  name: string;
  path: string;
}

// Module options for AST utilities
interface ModuleOptions {
  module?: string;
  name: string;
  path?: string;
  flat?: boolean;
}

// Generate from files options
interface GenerateFromFilesOptions {
  templates?: string;
  destination?: string;
}

// Latest versions configuration
interface LatestVersions {
  Angular: string;
  DevkitBuildAngular: string;
  DevkitSchematics: string;
  AngularCli: string;
  RxJs: string;
  TypeScript: string;
  ZoneJs: string;
  AngularPWA: string;
  [packageName: string]: string;
}

Additional Utilities

Direct Import APIs

Some utilities are not exported from the main utility index but can be imported directly:

// AST manipulation utilities (not in main utility exports)
import { 
  findNode,
  findNodes,
  getSourceNodes,
  addImportToModule,
  addDeclarationToModule,
  addProviderToModule,
  insertImport,
  Change,
  InsertChange,
  RemoveChange,
  ReplaceChange,
  applyToUpdateRecorder
} from '@schematics/angular/utility/ast-utils';

// Package.json manipulation (not in main utility exports)
import { 
  addPackageJsonDependency,
  getPackageJsonDependency,
  removePackageJsonDependency,
  NodeDependency,
  NodeDependencyType
} from '@schematics/angular/utility/dependencies';

// Version information
import { latestVersions } from '@schematics/angular/utility/latest-versions';

// Project utilities  
import { 
  getProject,
  isWorkspaceProject,
  buildDefaultPath,
  createDefaultPath,
  allWorkspaceTargets,
  allTargetOptions
} from '@schematics/angular/utility/workspace';

// Path utilities
import { 
  relativePathToWorkspaceRoot,
  buildRelativePath
} from '@schematics/angular/utility/paths';

// Validation utilities
import { 
  validateHtmlSelector,
  validateClassName,
  validateName
} from '@schematics/angular/utility/validation';

// Test utilities
import { 
  SchematicTestRunner,
  UnitTestTree
} from '@schematics/angular/utility/test';