@schematics/angular

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.

README

@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 project
component	Creates a new, generic component definition in the given project
directive	Creates a new, generic directive definition in the given project
enum	Generates a new, generic enum definition in the given project
guard	Generates a new, generic route guard definition in the given project
interceptor	Creates a new, generic interceptor definition in the given project
interface	Creates a new, generic interface definition in the given project
library	Creates a new, generic library project in the current workspace
module	Creates a new, generic NgModule definition in the given project
ng-new	Creates a new project by combining the workspace and application schematics
pipe	Creates a new, generic pipe definition in the given project
resolver	Creates a new, generic resolver definition in the given project
service	Creates a new, generic service definition in the given 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 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.

Changelog

19.0.0-next.1 (2024-08-22)

Breaking Changes

@angular-devkit/build-angular

• The browserTarget option has been removed from the DevServer and ExtractI18n builders. buildTarget is to be used instead.

@angular-devkit/core

• The deprecated fileBuffer function is no longer available. Update your code to use stringToFileBuffer instead to maintain compatibility.

  Note: that this change does not affect application developers.

@angular/build

• The @angular/localize/init polyfill will no longer be added automatically to projects. To prevent runtime issues, ensure that this polyfill is manually included in the "polyfills" section of your "angular.json" file if your application relies on Angular localization features.

@schematics/angular

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------- | | 7992218a9 | fix | remove declaration and sourceMap from default tsconfig |

@angular-devkit/build-angular

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------- | | 0b161bc76 | fix | remove outdated browser-esbuild option warning | | e40384e63 | refactor | remove deprecated browserTarget |

@angular-devkit/core

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------ | | 0d8a1006d | refactor | remove deprecated fileBuffer function in favor of stringToFileBuffer |

@angular/build

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------- | | 71c06c69f | fix | improve error message when an unhandled exception occurs during prerendering | | 6b544f70e | fix | support reading on-disk files during i18n extraction | | d6a34034d | refactor | remove automatic addition of @angular/localize/init polyfill and related warnings |

@angular/ssr

| Commit | Type | Description | | --------------------------------------------------------------------------------------------------- | ---- | ---------------------------------------------------------- | | 9692a9054 | feat | improve handling of aborted requests in AngularServerApp |

<!-- CHANGELOG SPLIT MARKER -->

<a name="18.2.1"></a>