@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

<%= classify(name) %>

This library was generated with Angular CLI version <%= angularLatestVersion %>.

Code scaffolding

Run ng generate component component-name --project <%= name %> to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project <%= name %>.

Note: Don't forget to add --project <%= name %> or else it will be added to the default project in your angular.json file.

Build

Run ng build <%= name %> to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build <%= name %>, go to the dist folder cd dist/<%= dasherize(name) %> and run npm publish.

Running unit tests

Run ng test <%= name %> to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

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>