What is @schematics/angular?
The @schematics/angular package is a collection of schematics for generating and modifying Angular applications and libraries. Schematics are templates that support complex logic, allowing developers to automate the creation of common patterns and best practices in an Angular project. This package is primarily used with the Angular CLI to scaffold various parts of an Angular application, such as components, services, modules, and more.
What are @schematics/angular's main functionalities?
Generating Components
This command uses @schematics/angular to generate a new component named 'my-new-component'. It creates a new directory with the component's TypeScript, HTML, CSS, and spec files.
ng generate component my-new-component
Generating Services
This command generates a new service named 'my-new-service'. It creates a TypeScript file for the service, equipped with the @Injectable decorator, allowing it to be injected as a dependency in other classes.
ng generate service my-new-service
Generating Modules
Generates a new NgModule named 'my-module'. This is useful for organizing related components, services, directives, and pipes into cohesive blocks of functionality.
ng generate module my-module
Other packages similar to @schematics/angular
@ngrx/schematics
Similar to @schematics/angular, @ngrx/schematics provides schematics for generating and modifying parts of Angular applications, but it is focused on state management features using NgRx. It offers schematics for actions, reducers, effects, and more, facilitating the setup and development of reactive state management patterns.
@angular/material
While @angular/material primarily provides Angular components that implement Google's Material Design, it also includes schematics for adding and configuring Angular Material in an Angular project. These schematics can generate pre-configured navigation, dashboards, and tables, showcasing how it extends the Angular CLI's capabilities in a similar manner to @schematics/angular but with a focus on UI components.
@schematics/angular
This package contains a collection of schematics
for generating an Angular application.
Schematics
Name | Description |
---|
app-shell | Generates an app shell for running a server-side version of an app |
application | Generates a new basic app definition in the "projects" subfolder of the workspace |
class | Creates a new, generic class definition in the given or default project |
component | Creates a new, generic component definition in the given or default project |
directive | Creates a new, generic directive definition in the given or default project |
enum | Generates a new, generic enum definition for the given or default project |
guard | Generates a new, generic route guard definition in the given or default project |
interceptor | Creates a new, generic interceptor definition in the given or default project |
interface | Creates a new, generic interface definition in the given or default project |
library | Creates a new, generic library project in the current workspace |
module | Creates a new, generic NgModule definition in the given or default project |
ng-new | Creates a new project by combining the workspace and application schematics |
pipe | Creates a new, generic pipe definition in the given or default project |
resolver | Creates a new, generic resolver definition in the given or default project |
service | Creates a new, generic service definition in the given or default project |
service-worker | Pass this schematic to the "run" command to create a service worker |
web-worker | Creates a new, generic web worker definition in the given or default project |
workspace | Initializes an empty workspace and adds the necessary dependencies required by an Angular application |
Disclaimer
While the schematics when executed via the Angular CLI and their associated options are considered stable, the programmatic APIs are not considered officially supported and are not subject to the breaking change guarantees of SemVer.
14.1.1 (2022-08-03)
@angular/cli
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------- |
| 4ee825bac | fix | catch clause variable is not an Error instance |
@schematics/angular
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | -------------------------------- |
| 83dcfb32f | fix | prevent numbers from class names |
@angular-devkit/build-angular
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | --------------------------------------------------------------------------- |
| ef6da4aad | fix | allow the esbuild-based builder to fully resolve global stylesheet packages |
| eed54b359 | fix | catch clause variable is not an Error instance |
| c98471094 | fix | correctly respond to preflight requests |
| 94b444e4c | fix | correctly set ngDevMode
in esbuilder |
@angular-devkit/core
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | --------------------------------------------------------------- |
| 44c18082a | fix | classify
string util should concat string without using a .
|
@angular/create
| Commit | Type | Description |
| --------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------- |
| cb0d3fb33 | fix | use appropriate package manager to install dependencies |
Special Thanks
Alan Agius, Charles Lyding, Jason Bedard and Paul Gschwendtner
<!-- CHANGELOG SPLIT MARKER -->
<a name="14.1.0"></a>