This document covers the developer tools and migration infrastructure within the Angular repository. These systems are designed to automate codebase modernizations, provide deep runtime insights via browser extensions, and simplify complex architectural shifts.
For details on the CLI build system, see Build System and Development Infrastructure. For details on the Angular Compiler (ngtsc), see Angular Compiler System (ngtsc).
The Control Flow Migration schematic automates the transition from structural directives (*ngIf, *ngFor, *ngSwitch) to the built-in block syntax (@if, @for, @switch). This migration is critical for improving template performance and type checking.
The migration processes both inline templates within .ts files and external .html templates. It analyzes the Component decorator to locate templates and uses the Angular compiler's parseTemplate to build an AST for transformation.
Control Flow Entity Mapping
let data = ngIf to the as data syntax within @if blocks packages/core/schematics/ng-generate/control-flow-migration/ifs.ts111-118i18n attributes and ensures they are preserved, often by wrapping content in <ng-container> if necessary packages/core/schematics/ng-generate/control-flow-migration/types.ts23-24ng-template blocks referenced by ngIfElse or ngIfThen and inlines them into the new block structure packages/core/schematics/ng-generate/control-flow-migration/ifs.ts78-93For details, see Control Flow Migration Schematic.
Sources: packages/core/schematics/ng-generate/control-flow-migration/ifs.ts22-135 packages/core/schematics/ng-generate/control-flow-migration/util.ts47-55 packages/core/schematics/test/control_flow_migration_spec.ts70-94
Angular's schematic system is a collection of code generation and migration tools. They are bundled using Rollup into CommonJS format for compatibility with the Angular CLI.
The repository utilizes Tsurge, a sophisticated migration infrastructure designed for complex refactorings like the "Signals" migration. Unlike simple regex replacements, Tsurge-based migrations perform full project analysis to ensure type safety across the entire dependency graph.
| Schematic | Purpose |
|---|---|
signal-input-migration | Converts @Input() to the new input() signal API packages/core/schematics/BUILD.bazel85-87 |
signal-queries-migration | Converts @ViewChild and @ContentChild to signal-based queries packages/core/schematics/BUILD.bazel89-91 |
output-migration | Migrates @Output() to the output() function packages/core/schematics/BUILD.bazel93-95 |
inject-migration | Transitions constructor-based DI to the inject() function packages/core/schematics/BUILD.bazel65-67 |
Schematics are defined in collection.json (for ng generate) and migrations.json (for ng update). They are tested using a virtual file system via SchematicTestRunner and TempScopedNodeJsSyncHost.
Schematic Build and Test Flow
For details, see Schematic System Architecture.
Sources: packages/core/schematics/BUILD.bazel63-152 packages/core/schematics/test/control_flow_migration_spec.ts16-63 packages/core/schematics/migrations.json1-43
Angular DevTools is a browser extension (Chrome/Firefox) that provides a specialized debugging interface for Angular applications. It operates via a multi-layered architecture involving a frontend (the DevTools UI), a backend (injected into the application page), and a message bus for communication.
The extension uses a MessageBus to bridge the gap between the browser's execution context and the DevTools shell. In Chrome, this involves a background_bundle.js service worker and content_script_bundle.js.
DevTools Communication Entity Mapping
ng object and uses detect_angular_bundle.js to identify the framework version devtools/projects/shell-browser/src/manifest/manifest.chrome.json28ng-validate.ts script ensures the page is a valid Angular application before enabling DevTools features devtools/projects/shell-browser/src/app/ng-validate.ts1-10For details, see Angular DevTools Browser Extension.
Sources: devtools/projects/shell-browser/src/manifest/manifest.chrome.json1-52 devtools/projects/shell-browser/src/manifest/manifest.firefox.json1-36 devtools/projects/shell-browser/src/app/chrome-message-bus.ts1-15