@angular-devkit/core

What is @angular-devkit/core?

The @angular-devkit/core package is a fundamental part of the Angular DevKit which provides utility functions and an abstraction layer for managing file systems and other common tasks needed in the development of Angular applications. It is designed to be used by the Angular CLI and other tools to enhance and streamline the development process.

What are @angular-devkit/core's main functionalities?

Virtual File System

Allows manipulation of file systems in memory, which is useful for testing and build processes without affecting the actual file system.

{"import { virtualFs, HostTree } from '@angular-devkit/core';\nconst host = new HostTree();\nhost.create('/hello', 'world');\nconst exists = host.exists('/hello');\nconsole.log(exists); // true"}

Workspace Configuration

Provides utilities to read and manipulate Angular workspace configuration, enabling tools and scripts to modify project settings programmatically.

{"import { workspaces } from '@angular-devkit/core';\nasync function getWorkspace() {\n  const workspaceHost = workspaces.createWorkspaceHost(host);\n  const { workspace } = await workspaces.readWorkspace('/', workspaceHost);\n  console.log(workspace.projects.get('my-app'));\n}"}

Schematics

Supports the creation and execution of schematics which are templates used to generate or transform projects. This feature is crucial for extending the Angular CLI's capabilities.

{"import { SchematicContext, Tree, Rule } from '@angular-devkit/schematics';\nfunction mySchematic(_options: any): Rule {\n  return (tree: Tree, _context: SchematicContext) => {\n    tree.create('hello.txt', 'Hello World');\n    return tree;\n  };\n}"}

Other packages similar to @angular-devkit/core

yeoman-generator

Similar to the schematics functionality of @angular-devkit/core, Yeoman generators allow the creation of projects or parts of projects through templates. However, Yeoman is more generic and not Angular-specific.

fs-extra

Provides extended functionality for the Node.js file system module, similar to the virtual file system capabilities of @angular-devkit/core, but operates on the actual file system rather than a virtual one.

webpack

While primarily a module bundler, webpack offers a rich plugin interface that can perform similar tasks to those of @angular-devkit/core, such as manipulating files and project assets. However, it is more focused on the build process rather than project scaffolding or configuration.

README

Core

Shared utilities for Angular DevKit.

Exception

Json

Schema

SchemaValidatorResult

export interface SchemaValidatorResult {
  success: boolean;
  errors?: string[];
}

SchemaValidator

export interface SchemaValidator {
  (data: any): Observable<SchemaValidatorResult>;
}

SchemaFormatter

export interface SchemaFormatter {
  readonly async: boolean;
  validate(data: any): boolean | Observable<boolean>;
}

SchemaRegistry

export interface SchemaRegistry {
  compile(schema: Object): Observable<SchemaValidator>;
  addFormat(name: string, formatter: SchemaFormatter): void;
}

CoreSchemaRegistry

SchemaRegistry implementation using https://github.com/epoberezkin/ajv. Constructor accepts object containing SchemaFormatter that will be added automatically.

export class CoreSchemaRegistry implements SchemaRegistry {
  constructor(formats: { [name: string]: SchemaFormatter} = {}) {}
}

Logger

Utils

Virtual FS

Workspaces

The workspaces namespace provides an API for interacting with the workspace file formats. It provides an abstraction of the underlying storage format of the workspace and provides support for both reading and writing. Currently, the only supported format is the JSON-based format used by the Angular CLI. For this format, the API provides internal change tracking of values which enables fine-grained updates to the underlying storage of the workspace. This allows for the retention of existing formatting and comments.

A workspace is defined via the following object model. Definition collection objects are specialized Javascript Map objects with an additional add method to simplify addition and provide more localized error checking of the newly added values.

export interface WorkspaceDefinition {
    readonly extensions: Record<string, JsonValue | undefined>;
    readonly projects: ProjectDefinitionCollection;
}

export interface ProjectDefinition {
    readonly extensions: Record<string, JsonValue | undefined>;
    readonly targets: TargetDefinitionCollection;
    root: string;
    prefix?: string;
    sourceRoot?: string;
}

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

The API is asynchronous and has two main functions to facilitate reading, creation, and modifying a workspace: readWorkspace and writeWorkspace.

export enum WorkspaceFormat {
  JSON,
}

export function readWorkspace(
  path: string,
  host: WorkspaceHost,
  format?: WorkspaceFormat,
): Promise<{ workspace: WorkspaceDefinition; }>;

export function writeWorkspace(
  workspace: WorkspaceDefinition,
  host: WorkspaceHost,
  path?: string,
  format?: WorkspaceFormat,
): Promise<void>;

A WorkspaceHost abstracts the underlying data access methods from the functions. It provides methods to read, write, and analyze paths. A utility function is provided to create an instance of a WorkspaceHost from the Angular DevKit's virtual filesystem host abstraction.

export interface WorkspaceHost {
    readFile(path: string): Promise<string>;
    writeFile(path: string, data: string): Promise<void>;
    isDirectory(path: string): Promise<boolean>;
    isFile(path: string): Promise<boolean>;
}

export function createWorkspaceHost(host: virtualFs.Host): WorkspaceHost;

Usage Example

To demonstrate the usage of the API, the following code will show how to add a option property to a build target for an application.

import { NodeJsSyncHost } from '@angular-devkit/core/node';
import { workspaces } from '@angular-devkit/core';

async function demonstrate() {
    const host = workspaces.createWorkspaceHost(new NodeJsSyncHost());
    const workspace = await workspaces.readWorkspace('path/to/workspace/directory/', host);

    const project = workspace.projects.get('my-app');
    if (!project) {
      throw new Error('my-app does not exist');
    }

    const buildTarget = project.targets.get('build');
    if (!buildTarget) {
      throw new Error('build target does not exist');
    }

    buildTarget.options.optimization = true;

    await workspaces.writeWorkspace(workspace, host);
}

demonstrate();

Changelog

18.1.3 (2024-07-31)

@angular/build

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ----------------------------------------------------------------------------- | | a28615d7d | fix | add CSP nonce attribute to script tags when inline critical CSS is disabled | | 747a1447c | fix | prevent build failures with remote CSS imports when Tailwind is configured | | c0933f2c0 | fix | resolve error with extract-i18n builder for libraries |

<!-- CHANGELOG SPLIT MARKER -->

<a name="18.1.2"></a>