What is @angular-devkit/schematics?
@angular-devkit/schematics is a powerful tool for creating and managing code transformations in Angular projects. It allows developers to automate tasks such as generating components, services, and other Angular constructs, as well as performing code modifications and migrations.
What are @angular-devkit/schematics's main functionalities?
Generating a Component
This feature allows you to generate a new Angular component by creating the necessary TypeScript file with a basic component structure.
const { Rule, SchematicContext, Tree } = require('@angular-devkit/schematics');
function createComponent(options) {
return (tree, _context) => {
const content = `import { Component } from '@angular/core';
@Component({
selector: 'app-${options.name}',
templateUrl: './${options.name}.component.html',
styleUrls: ['./${options.name}.component.css']
})
export class ${options.name.charAt(0).toUpperCase() + options.name.slice(1)}Component { }
`;
tree.create(`/src/app/${options.name}/${options.name}.component.ts`, content);
return tree;
};
}
module.exports = { createComponent };
Updating a File
This feature allows you to update an existing file by replacing specified text with new text.
const { Rule, SchematicContext, Tree } = require('@angular-devkit/schematics');
function updateFile(options) {
return (tree, _context) => {
const filePath = options.path;
if (tree.exists(filePath)) {
const content = tree.read(filePath).toString('utf-8');
const updatedContent = content.replace(options.oldText, options.newText);
tree.overwrite(filePath, updatedContent);
}
return tree;
};
}
module.exports = { updateFile };
Deleting a File
This feature allows you to delete a specified file from the project.
const { Rule, SchematicContext, Tree } = require('@angular-devkit/schematics');
function deleteFile(options) {
return (tree, _context) => {
const filePath = options.path;
if (tree.exists(filePath)) {
tree.delete(filePath);
}
return tree;
};
}
module.exports = { deleteFile };
Other packages similar to @angular-devkit/schematics
yeoman-generator
Yeoman Generator is a scaffolding tool that allows developers to create custom generators for various types of projects. It is more general-purpose compared to @angular-devkit/schematics, which is specifically tailored for Angular projects.
plop
Plop is a micro-generator framework that allows developers to create custom generators for code scaffolding. It is simpler and more lightweight compared to @angular-devkit/schematics, making it suitable for smaller projects or those not specifically tied to Angular.
hygen
Hygen is a fast and lightweight code generator that allows developers to create custom templates and generators. It is similar to @angular-devkit/schematics in terms of functionality but is more focused on simplicity and ease of use.
Schematics
A scaffolding library for the modern web.
Description
Schematics are generators that transform an existing filesystem. They can create files, refactor existing files, or move files around.
What distinguishes Schematics from other generators, such as Yeoman or Yarn Create, is that schematics are purely descriptive; no changes are applied to the actual filesystem until everything is ready to be committed. There is no side effect, by design, in Schematics.
Glossary
Term | Description |
---|
Schematics | A generator that executes descriptive code without side effects on an existing file system. |
Collection | A list of schematics metadata. Schematics can be referred by name inside a collection. |
Tool | The code using the Schematics library. |
Tree | A staging area for changes, containing the original file system, and a list of changes to apply to it. |
Rule | A function that applies actions to a Tree . It returns a new Tree that will contain all transformations to be applied. |
Source | A function that creates an entirely new Tree from an empty filesystem. For example, a file source could read files from disk and create a Create Action for each of those. |
Action | An atomic operation to be validated and committed to a filesystem or a Tree . Actions are created by schematics. |
Sink | The final destination of all Action s. |
Tooling
Schematics is a library, and does not work by itself. A reference CLI is available on this repository, and is published on NPM at @angular-devkit/schematics-cli. This document explains the library usage and the tooling API, but does not go into the tool implementation itself.
The tooling is responsible for the following tasks:
- Create the Schematic Engine, and pass in a Collection and Schematic loader.
- Understand and respect the Schematics metadata and dependencies between collections. Schematics can refer to dependencies, and it's the responsibility of the tool to honor those dependencies. The reference CLI uses NPM packages for its collections.
- Create the Options object. Options can be anything, but the schematics can specify a JSON Schema that should be respected. The reference CLI, for example, parses the arguments as a JSON object and validates it with the Schema specified by the collection.
- Schematics provides some JSON Schema formats for validation that tooling should add. These validate paths, html selectors and app names. Please check the reference CLI for how these can be added.
- Call the schematics with the original Tree. The tree should represent the initial state of the filesystem. The reference CLI uses the current directory for this.
- Create a Sink and commit the result of the schematics to the Sink. Many sinks are provided by the library; FileSystemSink and DryRunSink are examples.
- Output any logs propagated by the library, including debugging information.
The tooling API is composed of the following pieces:
Engine
The SchematicEngine
is responsible for loading and constructing Collection
s and Schematics
. When creating an engine, the tooling provides an EngineHost
interface that understands how to create a CollectionDescription
from a name, and how to create a SchematicDescription
.
Schematics (Generators)
Schematics are generators and part of a Collection
.
Collection
A Collection is defined by a collection.json
file (in the reference CLI). This JSON defines the following properties:
Prop Name | Type | Description |
---|
name | string | The name of the collection. |
version | string | Unused field. |
Schematic
Operators, Sources and Rules
A Source
is a generator of a Tree
; it creates an entirely new root tree from nothing. A Rule
is a transformation from one Tree
to another. A Schematic
(at the root) is a Rule
that is normally applied on the filesystem.
Operators
FileOperator
s apply changes to a single FileEntry
and return a new FileEntry
. The result follows these rules:
- If the
FileEntry
returned is null, a DeleteAction
will be added to the action list. - If the path changed, a
RenameAction
will be added to the action list. - If the content changed, an
OverwriteAction
will be added to the action list.
It is impossible to create files using a FileOperator
.
Provided Operators
The Schematics library provides multiple Operator
factories by default that cover basic use cases:
FileOperator | Description |
---|
contentTemplate<T>(options: T) | Apply a content template (see the Template section) |
pathTemplate<T>(options: T) | Apply a path template (see the Template section) |
Provided Sources
The Schematics library additionally provides multiple Source
factories by default:
Source | Description |
---|
empty() | Creates a source that returns an empty Tree . |
source(tree: Tree) | Creates a Source that returns the Tree passed in as argument. |
url(url: string) | Loads a list of files from the given URL and returns a Tree with the files as CreateAction applied to an empty Tree . |
apply(source: Source, rules: Rule[]) | Apply a list of Rule s to a source, and return the resulting Source . |
Provided Rules
The schematics library also provides Rule
factories by default:
Rule | Description |
---|
noop() | Returns the input Tree as is. |
chain(rules: Rule[]) | Returns a Rule that's the concatenation of other Rule s. |
forEach(op: FileOperator) | Returns a Rule that applies an operator to every file of the input Tree . |
move(root: string) | Moves all the files from the input to a subdirectory. |
merge(other: Tree) | Merge the input Tree with the other Tree . |
contentTemplate<T>(options: T) | Apply a content template (see the Template section) to the entire Tree . |
pathTemplate<T>(options: T) | Apply a path template (see the Template section) to the entire Tree . |
template<T>(options: T) | Apply both path and content templates (see the Template section) to the entire Tree . |
filter(predicate: FilePredicate<boolean>) | Returns the input Tree with files that do not pass the FilePredicate . |
Templating
As referenced above, some functions are based upon a file templating system, which consists of path and content templating.
The system operates on placeholders defined inside files or their paths as loaded in the Tree
and fills these in as defined in the following, using values passed into the Rule
which applies the templating (i.e. template<T>(options: T)
).
Path Templating
Placeholder | Description |
---|
variable | Replaced with the value of variable . |
variable@function | Replaced with the result of the call function(variable) . Can be chained to the left (__variable@function1@function2__ etc). |
Content Templating
Placeholder | Description |
---|
<%= expression %> | Replaced with the result of the call of the given expression. This only supports direct expressions, no structural (for/if/...) JavaScript. |
<%- expression %> | Same as above, but the value of the result will be escaped for HTML when inserted (i.e. replacing '<' with '<') |
<% inline code %> | Inserts the given code into the template structure, allowing to insert structural JavaScript. |
<%# text %> | A comment, which gets entirely dropped. |
Examples
Simple
An example of a simple Schematics which creates a "hello world" file, using an option to determine its path:
import { Tree } from '@angular-devkit/schematics';
export default function MySchematic(options: any) {
return (tree: Tree) => {
tree.create(options.path + '/hi', 'Hello world!');
return tree;
};
}
A few things from this example:
- The function receives the list of options from the tooling.
- It returns a
Rule
, which is a transformation from a Tree
to another Tree
.
Templating
A simplified example of a Schematics which creates a file containing a new Class, using an option to determine its name:
export class <%= classify(name) %> {
}
import { strings } from '@angular-devkit/core';
import {
Rule,
SchematicContext,
SchematicsException,
Tree,
apply,
branchAndMerge,
mergeWith,
template,
url,
} from '@angular-devkit/schematics';
import { Schema as ClassOptions } from './schema';
export default function (options: ClassOptions): Rule {
return (tree: Tree, context: SchematicContext) => {
if (!options.name) {
throw new SchematicsException('Option (name) is required.');
}
const templateSource = apply(url('./files'), [
template({
...strings,
...options,
}),
]);
return branchAndMerge(mergeWith(templateSource));
};
}
Additional things from this example:
strings
provides the used dasherize
and classify
functions, among others.- The files are on-disk in the same root directory as the
index.ts
and loaded into a Tree
. - Then the
template
Rule
fills in the specified templating placeholders. For this, it only knows about the variables and functions passed to it via the options-object. - Finally, the resulting
Tree
, containing the new file, is merged with the existing files of the project which the Schematic is run on.
Future Work
Schematics is not done yet. Here's a list of things we are considering:
- Smart defaults for Options. Having a JavaScript function for default values based on other default values.
- Prompt for input options. This should only be prompted for the original schematics, dependencies to other schematics should not trigger another prompting.
- Tasks for running tooling-specific jobs before and after a schematics has been scaffolded. Such tasks can involve initialize git, or npm install. A specific list of tasks should be provided by the tool, with unsupported tasks generating an error.
v12.0.0 (2021-05-12)
Commits
<table>
<tbody>
<tr><td colspan=3><h3>@angular-devkit/architect (0.1200.0)</h3></td></tr>
<tr>
<td><b>Commit</b>
<td><b>Description</b>
<td><b>Notes</b>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/1da359ac08d1a5503ab152db72ee6cee927391b8"><img
align="top"
title="Feature" src="https://img.shields.io/badge/1da359a-feat-blue.svg" />
</a>
</td>
<td>add implementation for defaultConfiguration</td>
<td>
</td>
</tr>
<tr></tr>
<tr><td colspan=3><h3>@angular-devkit/build-angular (12.0.0)</h3></td></tr>
<tr>
<td><b>Commit</b>
<td><b>Description</b>
<td><b>Notes</b>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/93376177235108ed15a2fbba8ea079bc565802ce"><img
align="top"
title="Feature" src="https://img.shields.io/badge/9337617-feat-blue.svg" />
</a>
</td>
<td>add `postcss-preset-env` with stage 3 features</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/fa5cf53b644c96a50d09dce5f9e9ee401bf66053"><img
align="top"
title="Feature" src="https://img.shields.io/badge/fa5cf53-feat-blue.svg" />
</a>
</td>
<td>drop support for karma version 5.2</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/44e75be5b127545bf87e2d6d61370944f4d380a1"><img
align="top"
title="Feature" src="https://img.shields.io/badge/44e75be-feat-blue.svg" />
</a>
</td>
<td>drop support for ng-packagr version 11</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/aa3ea885ed69cfde0914abae547e15d6d499a908"><img
align="top"
title="Feature" src="https://img.shields.io/badge/aa3ea88-feat-blue.svg" />
</a>
</td>
<td>enable inlineCritical by default</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/71eab3ddb603cb70a98120012a174cb159d9b28d"><img
align="top"
title="Feature" src="https://img.shields.io/badge/71eab3d-feat-blue.svg" />
</a>
</td>
<td>show warning during build when project requires IE 11 support</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/1525e7ab2c3c6cd95ee91cf01243af78174246ca"><img
align="top"
title="Feature" src="https://img.shields.io/badge/1525e7a-feat-blue.svg" />
</a>
</td>
<td>expose legacy-migrate message format</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/2616ef0d3fdf6821a60f5ae9dcb54d65be0506e1"><img
align="top"
title="Feature" src="https://img.shields.io/badge/2616ef0-feat-blue.svg" />
</a>
</td>
<td>integrate JIT mode linker</td>
<td>
<a href="https://github.com/angular/angular-cli/issues/20281">
[Closes #20281]<br />
</a>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/d883ce5d7e39de774fe90e4ccdbc9a84a600b7e8"><img
align="top"
title="Feature" src="https://img.shields.io/badge/d883ce5-feat-blue.svg" />
</a>
</td>
<td>upgrade to Webpack 5 throughout the build system</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/d47b4417d46f85f9f5bb460576d32aa0104e6d43"><img
align="top"
title="Feature" src="https://img.shields.io/badge/d47b441-feat-blue.svg" />
</a>
</td>
<td>support processing component inline CSS styles</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/bac563e5ee1efcda4bfb1334ecc0906796584cbd"><img
align="top"
title="Feature" src="https://img.shields.io/badge/bac563e-feat-blue.svg" />
</a>
</td>
<td>support specifying stylesheet language for inline component styles</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/6a7d1e0be4c59b27e78d1b03c083bdb2982c3845"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/6a7d1e0-fix-green.svg" />
</a>
</td>
<td>remove left-over `experimentalRollupPass` option</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/d5645675fd555e7f1afd523d4f2d42095034fc46"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/d564567-fix-green.svg" />
</a>
</td>
<td>support writing large Webpack stat outputs</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/ac4c109bebac3ea3d562f000c46a98d61b1bd148"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/ac4c109-fix-green.svg" />
</a>
</td>
<td>ensure output directory is present before writing stats JSON</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/012700ace56d6d0e35d6798c5a19534ffa5a5a0e"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/012700a-fix-green.svg" />
</a>
</td>
<td>remove deprecated View Engine support for i18n extraction</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/677913fc389f0ffa20e3e1928d7244427c07ef35"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/677913f-fix-green.svg" />
</a>
</td>
<td>remove usage of deprecated View Engine compiler</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/eca5a01f6e8d1c3ad874d74c58e6ffbddab6a031"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/eca5a01-fix-green.svg" />
</a>
</td>
<td>remove deprecated i18nLocale and i18nFormat options from i18n-extract</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/f1453126666af62a4ac4b4adca7d4282ecac0038"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/f145312-fix-green.svg" />
</a>
</td>
<td>update karma builder to use non-deprecated API</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/bd0aba7c80cee63f6fbcb94247fdf3506e9b4afa"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/bd0aba7-fix-green.svg" />
</a>
</td>
<td>disable webpack cache when using `NG_BUILD_CACHE`</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/cc52e5453cbf40810f56b6ea443c5f089c635a5d"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/cc52e54-fix-green.svg" />
</a>
</td>
<td>remove duplicate application bundle generation complete message</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/27e63e2b33be48b26a44da69c09198ef9a8dce21"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/27e63e2-fix-green.svg" />
</a>
</td>
<td>mark programmatic builder execution functions as experimental</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/88bea1ad72e5b5df8c7e4870fa49f517c263ba05"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/88bea1a-fix-green.svg" />
</a>
</td>
<td>avoid double build optimizer processing</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/a6e5103b9d3b3c20a5593542823d784e1e68896f"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/a6e5103-fix-green.svg" />
</a>
</td>
<td>replace Webpack 4 `hashForChunk` hook usage</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/c53a17886a263e686151c440938233e5f245218d"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/c53a178-fix-green.svg" />
</a>
</td>
<td>use new Webpack watch API in karma webpack plugin</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/bac34e5268b1aa9348edcf079240668bb6583b5f"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/bac34e5-fix-green.svg" />
</a>
</td>
<td>recover from CSS optimization errors</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/88467b3b659f2ae6a34f2214705d2dec4c046c76"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/88467b3-fix-green.svg" />
</a>
</td>
<td>disable Webpack 5 automatic public path support</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/898a486315a9e2762208c6b95b439751928e1ec7"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/898a486-fix-green.svg" />
</a>
</td>
<td>always inject live reload client when using live reload</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/656f8d75a3368a5affd1c55145841123dafdb007"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/656f8d7-fix-green.svg" />
</a>
</td>
<td>change several builder options defaults</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/7a8686abe9d490f22ff25f6b02709c9e18d3c410"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/7a8686a-fix-green.svg" />
</a>
</td>
<td>show warning when using stylus</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/33ca65aaa80c22c708c64a19f0374f5493244995"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/33ca65a-fix-green.svg" />
</a>
</td>
<td>avoid triggering file change after file build</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/57ac7f306b23063f50c5f63edacb9f64685ba00b"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/57ac7f3-fix-green.svg" />
</a>
</td>
<td>remove left-over `forkTypeChecker` option</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/c8d2d687108701f6aec0956970683a1c3f03d0e3"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/c8d2d68-fix-green.svg" />
</a>
</td>
<td>disable CSS declaration sorting optimizations</td>
<td>
<a href="https://github.com/angular/angular-cli/issues/20693">
[Closes #20693]<br />
</a>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/00ff390feaeb457812d67c367f65ba799d3ac66a"><img
align="top"
title="Performance Improvement" src="https://img.shields.io/badge/00ff390-perf-orange.svg" />
</a>
</td>
<td>disable `showCircularDependencies` by default</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/fa0fc45b8782910e09689bd40a6f8d2743c5b0ce"><img
align="top"
title="Performance Improvement" src="https://img.shields.io/badge/fa0fc45-perf-orange.svg" />
</a>
</td>
<td>use Webpack's GC memory caching in watch mode</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/9a32ed9800eb4494e72537bacae4104692a54d70"><img
align="top"
title="Performance Improvement" src="https://img.shields.io/badge/9a32ed9-perf-orange.svg" />
</a>
</td>
<td>improve incremental time during Karma tests</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/54696e788a04c0bfad3514e2e36d420d7dee5aee"><img
align="top"
title="Performance Improvement" src="https://img.shields.io/badge/54696e7-perf-orange.svg" />
</a>
</td>
<td>avoid async downlevel for known ES2015 code</td>
<td>
</td>
</tr>
<tr></tr>
<tr><td colspan=3><h3>@angular-devkit/build-optimizer (0.1200.0)</h3></td></tr>
<tr>
<td><b>Commit</b>
<td><b>Description</b>
<td><b>Notes</b>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/1f83f305db88aeb5164f6d13869f7cc10e44527e"><img
align="top"
title="Feature" src="https://img.shields.io/badge/1f83f30-feat-blue.svg" />
</a>
</td>
<td>support Webpack 5</td>
<td>
</td>
</tr>
<tr></tr>
<tr><td colspan=3><h3>@angular-devkit/build-webpack (0.1200.0)</h3></td></tr>
<tr>
<td><b>Commit</b>
<td><b>Description</b>
<td><b>Notes</b>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/ff32ada86b486d96922c693f703e25e01848d020"><img
align="top"
title="Feature" src="https://img.shields.io/badge/ff32ada-feat-blue.svg" />
</a>
</td>
<td>provide output path in builder results</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/18c954129279d68b5c02c9f486a7db34be5492d1"><img
align="top"
title="Feature" src="https://img.shields.io/badge/18c9541-feat-blue.svg" />
</a>
</td>
<td>support Webpack 5</td>
<td>
</td>
</tr>
<tr><td colspan=3><h3>@angular-devkit/core (12.0.0)</h3></td></tr>
<tr>
<td><b>Commit</b>
<td><b>Description</b>
<td><b>Notes</b>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/8e981d08809a7f1084b5cae7a539217d6fe7f757"><img
align="top"
title="Feature" src="https://img.shields.io/badge/8e981d0-feat-blue.svg" />
</a>
</td>
<td>add handling for `defaultConfiguration` target definition property</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/08753138d336fb870a66face70f5624ba64b4c69"><img
align="top"
title="Feature" src="https://img.shields.io/badge/0875313-feat-blue.svg" />
</a>
</td>
<td>update schema validator</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/3bb3c6cd51d24fe5636cdcf63670ea164f57aa63"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/3bb3c6c-fix-green.svg" />
</a>
</td>
<td>ensure job input values are processed in order</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/4a68ad7c4b787c8daff75a80f2a36b6301a509b3"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/4a68ad7-fix-green.svg" />
</a>
</td>
<td>improve handling of set schema values</td>
<td>
<a href="https://github.com/angular/angular-cli/issues/20594">
[Closes #20594]<br />
</a>
</td>
</tr>
<tr><td colspan=3><h3>@angular/cli (12.0.0)</h3></td></tr>
<tr>
<td><b>Commit</b>
<td><b>Description</b>
<td><b>Notes</b>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/f7e3e2335dfd6f54f435c95baa024c60a94b791c"><img
align="top"
title="Feature" src="https://img.shields.io/badge/f7e3e23-feat-blue.svg" />
</a>
</td>
<td>add `defaultConfiguration` property to architect schema</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/a5877bf91765af71c1368fd2fb61d29079931205"><img
align="top"
title="Feature" src="https://img.shields.io/badge/a5877bf-feat-blue.svg" />
</a>
</td>
<td>deprecate `--prod` command line argument</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/985dc1a4c71693ad78c35f5d6e95397f9753239e"><img
align="top"
title="Feature" src="https://img.shields.io/badge/985dc1a-feat-blue.svg" />
</a>
</td>
<td>confirm ng add action before installation</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/79856644b4d476d50013eafee949d1a508b86104"><img
align="top"
title="Feature" src="https://img.shields.io/badge/7985664-feat-blue.svg" />
</a>
</td>
<td>support TypeScript 4.2</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/b179a704829fef72191045a443b4b7eb7d20141c"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/b179a70-fix-green.svg" />
</a>
</td>
<td>ensure odd number Node.js version message is a warning</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/065ac4546fbb4928245609d52c1f6d81fdd48cb9"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/065ac45-fix-green.svg" />
</a>
</td>
<td>remove npm 7 incompatibility notification</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/06335515eb05c84d8dfdbfa10f8e3201b714d5da"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/0633551-fix-green.svg" />
</a>
</td>
<td>avoid exceptions for expected errors in architect commands</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/e84fa72751b377ec4cf2419357190a79b0513377"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/e84fa72-fix-green.svg" />
</a>
</td>
<td>ensure update migrations are fully executed</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/8a805fe0b9a0db3329aa51d95a41f3baacd45feb"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/8a805fe-fix-green.svg" />
</a>
</td>
<td>exclude deprecated packages with removal migrations from update</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/d68cb92dc2113753e7eefb91e54b70a60c1acd94"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/d68cb92-fix-green.svg" />
</a>
</td>
<td>add message update updating from non LTS versions of the CLI</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/5cc1a4e382b0fb43339bddbf9f2fcbddbda7744a"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/5cc1a4e-fix-green.svg" />
</a>
</td>
<td>ignore `tsickle` during updates</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/cd198d5f2f04558bb7f518c6db19a6236f83b620"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/cd198d5-fix-green.svg" />
</a>
</td>
<td>run all migrations when updating from or between prereleases</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/7c288c81a0caa9dba098c49e29f38d9dbd38c55b"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/7c288c8-fix-green.svg" />
</a>
</td>
<td>add package manager name and version in `ng version` output</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/07e8bf99903daa72914d192ba6d7a43b7f8652b8"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/07e8bf9-fix-green.svg" />
</a>
</td>
<td>Support XDG Base Directory Specification</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/3a231300ba046ce1e2a11ab98bb16f1be7ba25a8"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/3a23130-fix-green.svg" />
</a>
</td>
<td>don't display options multiple times in schematics help output</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/95cb13e6e3377a52cc67f89196ae8322743d3b08"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/95cb13e-fix-green.svg" />
</a>
</td>
<td>change package installation to async</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/bc015937b2117f47c0caa5cad265b938d5b1afe6"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/bc01593-fix-green.svg" />
</a>
</td>
<td>infer schematic defaults correctly when using `--project`</td>
<td>
<a href="https://github.com/angular/angular-cli/issues/20666">
[Closes #20666]<br />
</a>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/8b0cefbed2e9253313067b5b715844ddac3fd808"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/8b0cefb-fix-green.svg" />
</a>
</td>
<td>propagate update's force option to package managers</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/853fdffcb8752bc2217bdad2d8bb23a26457c63e"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/853fdff-fix-green.svg" />
</a>
</td>
<td>allow unsetting config when value is `undefined`</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/c0efbe7c67a3edb2dd053fbce2f9debb1bdd180b"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/c0efbe7-fix-green.svg" />
</a>
</td>
<td>allow config object to be of JSON.</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/8524d20fd7484449971df894a977aa5be83cb3ec"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/8524d20-fix-green.svg" />
</a>
</td>
<td>disallow additional properties in builders sections</td>
<td>
</td>
</tr>
<tr></tr>
<tr><td colspan=3><h3>@ngtools/webpack (12.0.0)</h3></td></tr>
<tr>
<td><b>Commit</b>
<td><b>Description</b>
<td><b>Notes</b>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/789e05d800c1093881d24a066fb7881c26332349"><img
align="top"
title="Feature" src="https://img.shields.io/badge/789e05d-feat-blue.svg" />
</a>
</td>
<td>support Webpack 5</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/0dc73276cafd42415dcaa6507ab221f1116273b5"><img
align="top"
title="Feature" src="https://img.shields.io/badge/0dc7327-feat-blue.svg" />
</a>
</td>
<td>drop support for string based lazy loading</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/46e9d0e8a646805ba9e48aac1bc95761f2668571"><img
align="top"
title="Feature" src="https://img.shields.io/badge/46e9d0e-feat-blue.svg" />
</a>
</td>
<td>support multiple plugin instances per compilation</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/5e5b2d9b1a15dc0f4f1690bab109bdd8e5613be3"><img
align="top"
title="Feature" src="https://img.shields.io/badge/5e5b2d9-feat-blue.svg" />
</a>
</td>
<td>support generating data URIs for inline component styles in JIT</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/8c7d56e03adb9c3303760fc2e38e2d6d96452bac"><img
align="top"
title="Feature" src="https://img.shields.io/badge/8c7d56e-feat-blue.svg" />
</a>
</td>
<td>support processing inline component styles in AOT</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/3504c43e48d8e265ca0943005f3cea2d25290cbd"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/3504c43-fix-green.svg" />
</a>
</td>
<td>remove Webpack 5 deprecation warning in resource loader</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/430ee441bd2e5729a8a24f72a1df8fd782c9f9f6"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/430ee44-fix-green.svg" />
</a>
</td>
<td>use correct Webpack asset stage in resource loader</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/160102ae57d780dded6c9002faf07b601a866d3d"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/160102a-fix-green.svg" />
</a>
</td>
<td>remove Webpack plugin for deprecated ViewEngine compiler</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/ca5ceaa10780bf5d05262bd2bc2e5909d51d3aa9"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/ca5ceaa-fix-green.svg" />
</a>
</td>
<td>only track actual resource file dependencies</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/95aa2b8f925ee295b8edf659b5d8e706d122ffec"><img
align="top"
title="Performance Improvement" src="https://img.shields.io/badge/95aa2b8-perf-orange.svg" />
</a>
</td>
<td>avoid adding transitive dependencies to Webpack's dependency graph</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/dfefd6ba4fcda6baa3dc172978ca84acaa48ec54"><img
align="top"
title="Performance Improvement" src="https://img.shields.io/badge/dfefd6b-perf-orange.svg" />
</a>
</td>
<td>use precalculated dependencies in unused file check</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/aeebd14f04b8e520b0144a77e765da807a08dda0"><img
align="top"
title="Performance Improvement" src="https://img.shields.io/badge/aeebd14-perf-orange.svg" />
</a>
</td>
<td>only check affected files for Angular semantic diagnostics</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/22ac3b387c2a4231556e188bb7e6d9eda6989a39"><img
align="top"
title="Performance Improvement" src="https://img.shields.io/badge/22ac3b3-perf-orange.svg" />
</a>
</td>
<td>cache results of processed inline resources</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/057ba0cfefe9ae22bc90ffa4d7ab2aebd4848c93"><img
align="top"
title="Performance Improvement" src="https://img.shields.io/badge/057ba0c-perf-orange.svg" />
</a>
</td>
<td>rebuild Angular required files asynchronously</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/1ec630fa88bfc818eea9d0810b2c7a6bf8268eb5"><img
align="top"
title="Performance Improvement" src="https://img.shields.io/badge/1ec630f-perf-orange.svg" />
</a>
</td>
<td>reduce source file and Webpack module iteration</td>
<td>
</td>
</tr>
<tr></tr>
<tr><td colspan=3><h3>@schematics/angular (12.0.0)</h3></td></tr>
<tr>
<td><b>Commit</b>
<td><b>Description</b>
<td><b>Notes</b>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/f424529d9ccaeb16643a8383ad3647af82062b16"><img
align="top"
title="Feature" src="https://img.shields.io/badge/f424529-feat-blue.svg" />
</a>
</td>
<td>add migration to remove deprecated options from 'angular.json'</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/b105ed63c7610dd1397a3d24d4a7439564a019aa"><img
align="top"
title="Feature" src="https://img.shields.io/badge/b105ed6-feat-blue.svg" />
</a>
</td>
<td>strict mode by default</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/bb38f85202f749040b241c8277280fab21c3379c"><img
align="top"
title="Feature" src="https://img.shields.io/badge/bb38f85-feat-blue.svg" />
</a>
</td>
<td>use new zone.js entry-points</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/7d57dd2f3e7d36cc4ed2c356f79139486790cbfa"><img
align="top"
title="Feature" src="https://img.shields.io/badge/7d57dd2-feat-blue.svg" />
</a>
</td>
<td>add migration to use new zone.js entry-points</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/96a4467ce90fb6b88f5be39f73c8fd64ce057a4a"><img
align="top"
title="Feature" src="https://img.shields.io/badge/96a4467-feat-blue.svg" />
</a>
</td>
<td>add migration to remove emitDecoratorMetadata</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/1199205bc2844e2c83d8f8e5092e89f8bd24eec1"><img
align="top"
title="Feature" src="https://img.shields.io/badge/1199205-feat-blue.svg" />
</a>
</td>
<td>augment `universal` schematics to import `platform-server` shims</td>
<td>
<a href="https://github.com/angular/angular/issues/40559">
[Closes #40559]<br />
</a>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/d19d2ccae55f96d4d8260da6572f34a47616a89b"><img
align="top"
title="Feature" src="https://img.shields.io/badge/d19d2cc-feat-blue.svg" />
</a>
</td>
<td>update new project dependencies version</td>
<td>
<a href="https://github.com/angular/angular-cli/issues/20106">
[Closes #20106]<br />
</a>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/1de6d71edd899465a01c65790f6fb04159acc821"><img
align="top"
title="Feature" src="https://img.shields.io/badge/1de6d71-feat-blue.svg" />
</a>
</td>
<td>production builds by default</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/3b7470d4836bcfff31ee4bf90ec4396f2905c633"><img
align="top"
title="Feature" src="https://img.shields.io/badge/3b7470d-feat-blue.svg" />
</a>
</td>
<td>deprecate `legacyBrowsers` application and ng-new option</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/f4875b967ae9ca5640cb27bfb37166528cab88d8"><img
align="top"
title="Feature" src="https://img.shields.io/badge/f4875b9-feat-blue.svg" />
</a>
</td>
<td>add migration to remove `lazyModules` configuration option</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/3ee12af89be58ccea8996e2e86a18a23d193abbe"><img
align="top"
title="Feature" src="https://img.shields.io/badge/3ee12af-feat-blue.svg" />
</a>
</td>
<td>add migration to update lazy loading string syntax to use dynamic imports</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/81129e12d0ae4cbaeb5ab537facb7990be9b8b45"><img
align="top"
title="Feature" src="https://img.shields.io/badge/81129e1-feat-blue.svg" />
</a>
</td>
<td>update several TypeScript compilation target (Syntax)</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/226a8d274d27d191651926bc7970af11cfee2597"><img
align="top"
title="Feature" src="https://img.shields.io/badge/226a8d2-feat-blue.svg" />
</a>
</td>
<td>remove tslint and codelyzer from new projects</td>
<td>
<a href="https://github.com/angular/angular-cli/issues/20105">
[Closes #20105]<br />
</a>
<a href="https://github.com/angular/angular-cli/issues/18465">
[Closes #18465]<br />
</a>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/c7e126609f4a0d86bd47a226717ab6430fd85cfd"><img
align="top"
title="Feature" src="https://img.shields.io/badge/c7e1266-feat-blue.svg" />
</a>
</td>
<td>add production by default optional migration</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/f22f7e7371c0daa2dc59110cd21e3ff3fb4620d5"><img
align="top"
title="Feature" src="https://img.shields.io/badge/f22f7e7-feat-blue.svg" />
</a>
</td>
<td>update new workspaces to use Karma 6.3</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/8582ddc35e153b8bc409d0505f29bc43e6cef455"><img
align="top"
title="Feature" src="https://img.shields.io/badge/8582ddc-feat-blue.svg" />
</a>
</td>
<td>remove `entryComponent` from `component` schematic</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/695a01ba02b8c6e9656ed5ed5b0c5e17760ba21d"><img
align="top"
title="Feature" src="https://img.shields.io/badge/695a01b-feat-blue.svg" />
</a>
</td>
<td>configure new libraries to be published in Ivy partial mode</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/84e023120864c014a2d1a275265c0941a0a16df2"><img
align="top"
title="Feature" src="https://img.shields.io/badge/84e0231-feat-blue.svg" />
</a>
</td>
<td>update `jasmine-spec-reporter` to version 7</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/e33a3061f02828303e3c6ef508b5b23cbc73eef2"><img
align="top"
title="Feature" src="https://img.shields.io/badge/e33a306-feat-blue.svg" />
</a>
</td>
<td>migrate web workers to support Webpack 5</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/575b1a75b17f0b03748c137c07976e00be4c8b51"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/575b1a7-fix-green.svg" />
</a>
</td>
<td>only update removed v12 options in migration</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/ba6f546a026a3dba613c1c54ce0c767fe0940d0f"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/ba6f546-fix-green.svg" />
</a>
</td>
<td>add `additionalProperties` to all schemas</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/663c4bc9c10aa3df3defa188a1ba8f90c63b2722"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/663c4bc-fix-green.svg" />
</a>
</td>
<td>remove references to the prod flag</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/3bf831fac6166f6943a78b34bfd5f3c167f8911d"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/3bf831f-fix-green.svg" />
</a>
</td>
<td>only show legacy browsers deprecation warning when option is used</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/09daf7a7e0886738f25f071aa5e072e1dc06bf7e"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/09daf7a-fix-green.svg" />
</a>
</td>
<td>remove leftover workspace tslint config</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/fb14945c02a3f150d6965e77324416b1ec7cc575"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/fb14945-fix-green.svg" />
</a>
</td>
<td>correctly handle adding multi-line strings to `@NgModule` metadata</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/645353db26e9d6e8f893322a52b320ccd5ca1d5d"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/645353d-fix-green.svg" />
</a>
</td>
<td>run update-i18n migration for server builder</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/df988c249363682aa6f9d3d95ae3b8636e24ebf9"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/df988c2-fix-green.svg" />
</a>
</td>
<td>update web-worker to support Webpack 5</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/1bf976f663e938164eb3ff55540ea0b3934d3a00"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/1bf976f-fix-green.svg" />
</a>
</td>
<td>set `inlineStyleLanguage` when application `style` option is used</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/ab44cb2df79da301dc5cde167bc8a51cfe15e1d6"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/ab44cb2-fix-green.svg" />
</a>
</td>
<td>set `inlineStyleLanguage` for universal if present in build options</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/21b601b5a77a70c6239249833e8639d7dd9cee98"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/21b601b-fix-green.svg" />
</a>
</td>
<td>remove jasmine-spec-reporter and ts-node from default workspace</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/81471c06cf8583ec81a409c2c8037edf784c945e"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/81471c0-fix-green.svg" />
</a>
</td>
<td>remove Protractor from home page</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/bc3f8dc34265f9a31dffd92598a03c0d8fe88aa5"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/bc3f8dc-fix-green.svg" />
</a>
</td>
<td>remove lint command from package.json</td>
<td>
<a href="https://github.com/angular/angular-cli/issues/20618">
[Closes #20618]<br />
</a>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/0ca35b1d47fa5003e4ed5d821b5573d6352a4dcc"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/0ca35b1-fix-green.svg" />
</a>
</td>
<td>fix migration for namedChunks and option</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/82158881a49b3104783c971e8a8155480fe13042"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/8215888-fix-green.svg" />
</a>
</td>
<td>add "type" option in enum schematic</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/89360ab4876db6fcf92f5508971da49228543e08"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/89360ab-fix-green.svg" />
</a>
</td>
<td>only run `emitDecoratorMetadata` removal migration in safe workspaces</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="https://github.com/angular/angular-cli/commit/ec7f3ad19c21e7a7106ff6a44edf676168b46054"><img
align="top"
title="Bug Fix" src="https://img.shields.io/badge/ec7f3ad-fix-green.svg" />
</a>
</td>
<td>replace `clientProject` with `project`</td>
<td>
</td>
</tr>
</tbody>
</table>
<a href="#breaking-changes"> </a>
Breaking Changes
<h3>
@schematics/angular: remove `stylus` from `style` options (<a href="https://github.com/angular/angular-cli/commit/fd729aca0e74c242797d4697786fbede06bc844b">fd729ac</a>)
</h3>
`styl` (Stylus) is no longer a supported value as `style` in `application`, `component`, `ng-new` schematics. Stylus is not actively maintained and only 0.3% of the Angular CLI users use it.
(cherry picked from commit 0272fc55b67d1a3f986b996c8eb21aea31eedf51)
<h3>
@angular-devkit/build-angular: change several builder options defaults (<a href="https://github.com/angular/angular-cli/commit/656f8d75a3368a5affd1c55145841123dafdb007">656f8d7</a>)
</h3>
A number of browser and server builder options have had their default values changed. The aim of these changes is to reduce the configuration complexity and support the new "production builds by default" initiative.
Browser builder
| Option | Previous default value | New default value |
|----------------------------------------|---------------------------|-------------------|
| optimization | false | true |
| aot | false | true |
| buildOptimizer | false | true |
| sourceMap | true | false |
| extractLicenses | false | true |
| namedChunks | true | false |
| vendorChunk | true | false |
Server builder
| Option | Previous default value | New default value |
|---------------|------------------------|-------------------|
| optimization | false | true |
| sourceMap | true | false |
(cherry picked from commit 0a74d0d28daf68510459ed73ef048c91bfcabbbc)
<h3>
@angular-devkit/core: update schema validator (<a href="https://github.com/angular/angular-cli/commit/08753138d336fb870a66face70f5624ba64b4c69">0875313</a>)
</h3>
support for JSON Schema draft-04 and draft-06 is removed. If you have schemas using the `id` keyword replace them with `$id`. For an interim period we will auto rename any top level `id` keyword to `$id`.
NB: This change only effects schematics and builders authors.
<h3>
@angular-devkit/build-angular: upgrade to Webpack 5 throughout the build system (<a href="https://github.com/angular/angular-cli/commit/d883ce5d7e39de774fe90e4ccdbc9a84a600b7e8">d883ce5</a>)
</h3>
Webpack 5 lazy loaded file name changes
Webpack 5 generates similar but differently named files for lazy loaded JavaScript files in development configurations (when the `namedChunks` option is enabled).
For the majority of users this change should have no effect on the application and/or build process. Production builds should also not be affected as the `namedChunks` option is disabled by default in production configurations.
However, if a project's post-build process makes assumptions as to the file names then adjustments may need to be made to account for the new naming paradigm.
Such post-build processes could include custom file transformations after the build, integration into service-side frameworks, or deployment procedures.
Example development file name change: `lazy-lazy-module.js` --> `src_app_lazy_lazy_module_ts.js`
Webpack 5 now includes web worker support. However, the structure of the URL within the Worker
constructor must be in a specific format that differs from the current requirement.
Web worker usage should be updated as shown below (where ./app.worker
should be replaced with the actual worker name):
Before: new Worker('./app.worker', ...)
After: new Worker(new URL('./app.worker', import.meta.url), ...)
<h3>
@ngtools/webpack: remove Webpack plugin for deprecated ViewEngine compiler (<a href="https://github.com/angular/angular-cli/commit/160102ae57d780dded6c9002faf07b601a866d3d">160102a</a>)
</h3>
Removal of View Engine support from application builds
With the removal of the deprecated View Engine compiler in Angular version 12 for applications, the View Engine Webpack plugin has been removed.
The Ivy-based Webpack plugin is the default used within the Angular CLI.
If using a custom standalone Webpack configuration, the removed `AngularCompilerPlugin` should be replaced with the Ivy-based `AngularWebpackPlugin`.
<h3>
@angular-devkit/build-angular: remove deprecated i18n options from server and browser builder (<a href="https://github.com/angular/angular-cli/commit/5cf9a08dc7a1c84568d00df8f957d55b10ce0193">5cf9a08</a>)
</h3>
Removal of deprecated browser and server command options.
- `i18nFile`, use `locales` object in the project metadata instead.
- `i18nFormat`, No longer needed as the format will be determined automatically.
- `i18nLocale`, use `localize` option instead.
<h3>
@angular-devkit/build-angular: remove deprecated i18nLocale and i18nFormat options from i18n-extract (<a href="https://github.com/angular/angular-cli/commit/eca5a01f6e8d1c3ad874d74c58e6ffbddab6a031">eca5a01</a>)
</h3>
Removal of deprecated `extract-i18n` command options
The deprecated `i18nLocale` option has been removed and the `i18n.sourceLocale` within a project's configuration should be used instead.
The deprecated `i18nFormat` option has been removed and the `format` option should be used instead.
<h3>
@angular-devkit/build-angular: remove usage of deprecated View Engine compiler (<a href="https://github.com/angular/angular-cli/commit/677913fc389f0ffa20e3e1928d7244427c07ef35">677913f</a>)
</h3>
Removal of View Engine support from application builds
With the removal of the deprecated View Engine compiler in Angular version 12 for applications, Ivy-based compilation will always be used when building an application.
The default behavior for applications is to use the Ivy compiler when building and no changes are required for these applications.
For applications that have opted-out of Ivy, a warning will be shown and an Ivy-based build will be attempted. If the build fails,
the application may need to be updated to become Ivy compatible.
<h3>
@schematics/angular: remove `entryComponent` from `component` schematic (<a href="https://github.com/angular/angular-cli/commit/8582ddc35e153b8bc409d0505f29bc43e6cef455">8582ddc</a>)
</h3>
`entryComponent` option has been removed from the `component` schematic as this was intended to be used with the now no longer supported ViewEngine rendering engine.
<h3>
@angular-devkit/build-angular: remove view engine app-shell generation (<a href="https://github.com/angular/angular-cli/commit/1c2aeeb46a23fd511c89f9c8800ac2a5ab0c2734">1c2aeeb</a>)
</h3>
App-shell builder now only supports generation using Ivy
<h3>
@angular-devkit/build-angular: remove deprecated View Engine support for i18n extraction (<a href="https://github.com/angular/angular-cli/commit/012700ace56d6d0e35d6798c5a19534ffa5a5a0e">012700a</a>)
</h3>
Removal of View Engine support from i18n extraction
With the removal of the deprecated View Engine compiler in Angular version 12 for applications, the `ng extract-i18n` command will now always use the Ivy compiler.
The `--ivy` option has also been removed as Ivy-based extraction is always enabled.
The default behavior for applications is to use the Ivy compiler for building/extraction and no changes are required for these applications.
For applications that have opted-out of Ivy, a warning will be shown and Ivy-based extraction will be attempted. If the extraction fails,
the application may need to be updated to become Ivy compatible.
<h3>
@angular/cli: confirm ng add action before installation (<a href="https://github.com/angular/angular-cli/commit/985dc1a4c71693ad78c35f5d6e95397f9753239e">985dc1a</a>)
</h3>
The `ng add` command will now ask the user to confirm the package and version prior to installing and executing an uninstalled package.
This new behavior allows a user to abort the action if the version selected is not appropriate or if a typo occurred on the command line and an incorrect package would be installed.
A `--skip-confirmation` option has been added to skip the prompt and directly install and execute the package. This option is useful in CI and non-TTY scenarios such as automated scripts.
<h3>
@angular-devkit/build-angular: remove deprecated `lazyModules` option (<a href="https://github.com/angular/angular-cli/commit/8d669123236c49e7f6bee1a7171c002abe03df1a">8d66912</a>)
</h3>
Server and Browser builder `lazyModules` option has been removed without replacement.
<h3>
@ngtools/webpack: drop support for string based lazy loading (<a href="https://github.com/angular/angular-cli/commit/0dc73276cafd42415dcaa6507ab221f1116273b5">0dc7327</a>)
</h3>
With this change we drop support for string based lazy loading `./lazy.module#LazyModule` use dynamic imports instead.
The following options which were used to support the above syntax were removed without replacement.
- discoverLazyRoutes
- additionalLazyModules
- additionalLazyModuleResources
- contextElementDependencyConstructor
<h3>
@angular-devkit/build-angular: enable inlineCritical by default (<a href="https://github.com/angular/angular-cli/commit/aa3ea885ed69cfde0914abae547e15d6d499a908">aa3ea88</a>)
</h3>
Critical CSS inlining is now enabled by default. If you wish to turn this off set `inlineCritical` to `false`.
See: https://angular.dev/reference/configs/workspace-config#optimization-configuration
<h3>
@angular-devkit/build-angular: drop support for zone.js 0.10 (<a href="https://github.com/angular/angular-cli/commit/f309516bcdcee711fc5693b5f14d6fef1cfa5dba">f309516</a>)
</h3>
Minimum supported `zone.js` version is `0.11.4`
<h3>
@angular-devkit/build-angular: drop support for ng-packagr version 11 (<a href="https://github.com/angular/angular-cli/commit/44e75be5b127545bf87e2d6d61370944f4d380a1">44e75be</a>)
</h3>
Minimum supported `ng-packagr` version is `12.0.0-next`
<h3>
@angular-devkit/build-angular: drop support for karma version 5.2 (<a href="https://github.com/angular/angular-cli/commit/fa5cf53b644c96a50d09dce5f9e9ee401bf66053">fa5cf53</a>)
</h3>
Minimum supported `karma` version is `6.0.0`
<h3>
set minimum Node.js version to 12.13 (<a href="https://github.com/angular/angular-cli/commit/d1f616930de4a8312e3441410098d9f248855d9d">d1f6169</a>)
</h3>
Node.js version 10 will become EOL on 2021-04-30.
Angular CLI 12 will require Node.js 12.13+ or 14.15+. Node.js 12.13 and 14.15 are the first LTS releases for their respective majors.
<h3>
@angular-devkit/build-angular: remove file-loader dependency (<a href="https://github.com/angular/angular-cli/commit/6732294ff34ca35698cec5a9ca91b664dd684289">6732294</a>)
</h3>
The unsupported/undocumented, Webpack specific functionality to `import`/`require()` a non-module file has been removed.
Before
import img from './images/asset.png';
After
<img src="images/asset.png" />
Special Thanks
Alan Agius, Charles Lyding, Keen Yee Liau, Joey Perrott, Doug Parker, Cédric Exbrayat, Douglas Parker, George Kalpakas, Sam Bulatov, Joshua Chapman, Santosh Yadav, David Shevitz, Kristiyan Kostadinov
<!-- CHANGELOG SPLIT MARKER -->
<a name="v12.0.0-rc.3"></a>