or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-system-integration.mdcli-commands.mdindex.mdpackage-management.mdprogrammatic-api.mdschematics-integration.mdworkspace-configuration.md
tile.json

workspace-configuration.mddocs/

Workspace Configuration

The Angular CLI provides comprehensive workspace and project configuration management through the AngularWorkspace class and related utilities. This system handles reading, validating, and modifying Angular workspace configuration files (angular.json and .angular.json).

Capabilities

AngularWorkspace Class

Core class for managing Angular workspace configurations with support for both global and local settings.

/**
 * Manages Angular workspace configuration with project definitions and CLI settings
 */
class AngularWorkspace {
  /** Base path of the workspace */
  readonly basePath: string;
  
  /** Workspace-level extensions and settings */
  readonly extensions: Record<string, any>;
  
  /** Project definitions within the workspace */  
  readonly projects: Record<string, ProjectDefinition>;
  
  /**
   * Get CLI configuration for the workspace
   * @returns CLI options object
   */
  getCli(): CliOptions;
  
  /**
   * Get CLI configuration for a specific project
   * @param projectName - Name of the project
   * @returns Project-specific CLI options
   */
  getProjectCli(projectName: string): CliOptions;
  
  /**
   * Save workspace configuration to disk
   * @returns Promise that resolves when save is complete
   */
  save(): Promise<void>;
  
  /**
   * Load workspace configuration from disk
   * @returns Promise that resolves when load is complete
   */
  load(): Promise<void>;
}

Workspace Access Functions

Utility functions for accessing and validating workspace configurations.

/**
 * Get workspace configuration instance
 * @param level - Configuration level to retrieve
 * @returns AngularWorkspace instance or null if not found
 */
function getWorkspace(level?: 'local' | 'global'): AngularWorkspace | null;

/**
 * Get raw workspace configuration JSON
 * @param level - Configuration level to retrieve
 * @returns Raw configuration object
 */
function getWorkspaceRaw(level?: 'local' | 'global'): any;

/**
 * Validate workspace configuration against schema
 * @param data - Configuration data to validate
 * @returns True if valid, false otherwise
 */
function validateWorkspace(data: any): boolean;

Usage Examples:

import { getWorkspace, getWorkspaceRaw, validateWorkspace } from "@angular/cli";

// Get local workspace configuration
const workspace = getWorkspace('local');
if (workspace) {
  console.log(`Workspace base path: ${workspace.basePath}`);
  console.log(`Projects: ${Object.keys(workspace.projects).join(', ')}`);
}

// Get raw configuration for custom processing
const rawConfig = getWorkspaceRaw('local');
if (rawConfig) {
  console.log(`Version: ${rawConfig.version}`);
  console.log(`Default project: ${rawConfig.defaultProject}`);
}

// Validate configuration
const isValid = validateWorkspace(rawConfig);
if (!isValid) {
  console.error('Invalid workspace configuration');
}

Project Discovery Functions

Functions for finding and identifying projects within workspaces.

/**
 * Find project configuration by current working directory
 * @param workspace - Workspace instance to search in
 * @returns Project name and definition if found
 */
function getProjectByCwd(workspace: AngularWorkspace): {
  name: string;
  project: ProjectDefinition;
} | null;

/**
 * Find workspace configuration file in directory tree
 * @param startPath - Directory to start search from
 * @returns Path to workspace file or null if not found
 */
function findWorkspaceFile(startPath?: string): string | null;

Usage Examples:

import { getWorkspace, getProjectByCwd, findWorkspaceFile } from "@angular/cli";

// Find workspace file
const workspaceFile = findWorkspaceFile();
if (workspaceFile) {
  console.log(`Found workspace at: ${workspaceFile}`);
}

// Find project by current directory
const workspace = getWorkspace('local');
if (workspace) {
  const currentProject = getProjectByCwd(workspace);
  if (currentProject) {
    console.log(`Current project: ${currentProject.name}`);
    console.log(`Project type: ${currentProject.project.projectType}`);
  }
}

Configuration Management Functions

Functions for managing CLI and schematic configuration settings.

/**
 * Get configured package manager for the workspace
 * @param workspace - Workspace instance
 * @returns Configured package manager or default
 */
function getConfiguredPackageManager(workspace?: AngularWorkspace): PackageManager;

/**
 * Get default options for a schematic
 * @param collection - Schematic collection name
 * @param schematic - Schematic name
 * @param project - Project name (optional)
 * @returns Default options object
 */
function getSchematicDefaults(
  collection: string,
  schematic: string,
  project?: string
): Record<string, any>;

/**
 * Check if a warning type is enabled in configuration
 * @param warningType - Type of warning to check
 * @returns True if warning is enabled
 */
function isWarningEnabled(warningType: string): boolean;

Usage Examples:

import { 
  getWorkspace, 
  getConfiguredPackageManager, 
  getSchematicDefaults,
  isWarningEnabled 
} from "@angular/cli";

const workspace = getWorkspace('local');

// Get package manager configuration
const packageManager = getConfiguredPackageManager(workspace);
console.log(`Using package manager: ${packageManager}`);

// Get schematic defaults
const componentDefaults = getSchematicDefaults(
  '@schematics/angular',
  'component',
  'my-app'
);
console.log('Component defaults:', componentDefaults);

// Check warning settings
if (isWarningEnabled('versionMismatch')) {
  console.warn('Version mismatch warnings are enabled');
}

Type Definitions

Core interfaces and types for workspace configuration.

/**
 * CLI-specific configuration options
 */
interface CliOptions {
  /** Default package manager */
  packageManager?: PackageManager;
  /** Default schematic collection */
  defaultCollection?: string;
  /** Analytics configuration */
  analytics?: boolean | AnalyticsConfig;
  /** Build cache configuration */
  cache?: {
    enabled?: boolean;
    path?: string;
    environment?: 'local' | 'ci';
  };
  /** Warning configuration */
  warnings?: {
    versionMismatch?: boolean;
    typescriptMismatch?: boolean;
  };
  /** Completion configuration */
  completion?: {
    prompted?: boolean;
  };
}

/**
 * Project definition within workspace
 */
interface ProjectDefinition {
  /** Project root directory relative to workspace */
  root: string;
  /** Type of project */
  projectType: 'application' | 'library';
  /** Default prefix for generated components */
  prefix?: string;
  /** Source root directory */
  sourceRoot?: string;
  /** Architect targets configuration */
  architect?: Record<string, TargetDefinition>;
  /** Project-specific schematics */
  schematics?: Record<string, any>;
  /** Project-specific CLI options */
  cli?: CliOptions;
}

/**
 * Architect target definition
 */
interface TargetDefinition {
  /** Builder to use for this target */
  builder: string;
  /** Default options for the target */
  options?: Record<string, any>;
  /** Named configurations for the target */
  configurations?: Record<string, Record<string, any>>;
  /** Default configuration to use */
  defaultConfiguration?: string;
}

/**
 * Analytics configuration options
 */
interface AnalyticsConfig {
  /** Whether analytics is enabled */
  enabled: boolean;
  /** User ID for analytics */
  uid?: string;
}

/**
 * Package manager enumeration
 */
enum PackageManager {
  npm = 'npm',
  cnpm = 'cnpm',
  yarn = 'yarn', 
  pnpm = 'pnpm',
  bun = 'bun'
}

Configuration File Structure

The Angular CLI uses angular.json or .angular.json files with the following structure:

{
  "version": 1,
  "newProjectRoot": "projects",
  "defaultProject": "my-app",
  "projects": {
    "my-app": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts"
          },
          "configurations": {
            "production": {
              "optimization": true,
              "sourceMap": false
            }
          }
        }
      }
    }
  },
  "cli": {
    "packageManager": "npm",
    "analytics": false
  }
}

Usage Patterns

Reading Configuration

import { getWorkspace } from "@angular/cli";

const workspace = getWorkspace('local');
if (workspace) {
  // Access workspace properties
  const cliOptions = workspace.getCli();
  const projects = workspace.projects;
  
  // Iterate through projects
  for (const [name, project] of Object.entries(projects)) {
    console.log(`Project: ${name}`);
    console.log(`Type: ${project.projectType}`);
    console.log(`Root: ${project.root}`);
  }
}

Modifying Configuration

import { getWorkspace } from "@angular/cli";

async function updateWorkspaceConfig() {
  const workspace = getWorkspace('local');
  if (workspace) {
    // Modify configuration
    workspace.extensions.cli = {
      ...workspace.extensions.cli,
      packageManager: 'pnpm'
    };
    
    // Save changes
    await workspace.save();
    console.log('Workspace configuration updated');
  }
}