|
| 1 | +# Generating code using schematics |
| 2 | + |
| 3 | +A schematic is a template-based code generator that supports complex logic. |
| 4 | +It is a set of instructions for transforming a software project by generating or modifying code. |
| 5 | +Schematics are packaged into [collections](guide/glossary#collection) and installed with npm. |
| 6 | + |
| 7 | +The schematic collection can be a powerful tool for creating, modifying, and maintaining any software project, but is particularly useful for customizing Angular projects to suit the particular needs of your own organization. |
| 8 | +You might use schematics, for example, to generate commonly-used UI patterns or specific components, using predefined templates or layouts. |
| 9 | +You can use schematics to enforce architectural rules and conventions, making your projects consistent and inter-operative. |
| 10 | + |
| 11 | +## Schematics for the Angular CLI |
| 12 | + |
| 13 | +Schematics are part of the Angular ecosystem. The [Angular CLI](guide/glossary#cli) uses schematics to apply transforms to a web-app project. |
| 14 | +You can modify these schematics, and define new ones to do things like update your code to fix breaking changes in a dependency, for example, or to add a new configuration option or framework to an existing project. |
| 15 | + |
| 16 | +Schematics that are included in the `@schematics/angular` collection are run by default by the commands `ng generate` and `ng add`. |
| 17 | +The package contains named schematics that configure the options that are available to the CLI for `ng generate` sub-commands, such as `ng generate component` and `ng generate service`. |
| 18 | +The subcommands for `ng generate` are shorthand for the corresponding schematic. You can specify a particular schematic (or collection of schematics) to generate, using the long form: |
| 19 | + |
| 20 | +<code-example language="bash"> |
| 21 | +ng generate my-schematic-collection:my-schematic-name |
| 22 | +</code-example> |
| 23 | + |
| 24 | +or |
| 25 | + |
| 26 | +<code-example language="bash"> |
| 27 | +ng generate my-schematic-name --collection collection-name |
| 28 | +</code-example> |
| 29 | + |
| 30 | +### Configuring CLI schematics |
| 31 | + |
| 32 | +A JSON schema associated with a schematic tells the Angular CLI what options are available to commands and subcommands, and determines the defaults. |
| 33 | +These defaults can be overridden by providing a different value for an option on the command line. |
| 34 | +See [Workspace Configuration](guide/workspace-config) for information about how you can change the generation option defaults for your workspace. |
| 35 | + |
| 36 | +The JSON schemas for the default schematics used by the CLI to generate projects and parts of projects are collected in the package [`@schematics/angular`](https://raw.githubusercontent.com/angular/angular-cli/v7.0.0/packages/schematics/angular/application/schema.json). |
| 37 | +The schema describes the options available to the CLI for each of the `ng generate` sub-commands, as shown in the `--help` output. |
| 38 | + |
| 39 | +## Developing schematics for libraries |
| 40 | + |
| 41 | +As a library developer, you can create your own collections of custom schematics to integrate your library with the Angular CLI. |
| 42 | + |
| 43 | +* An *add schematic* allows developers to install your library in an Angular workspace using `ng add`. |
| 44 | + |
| 45 | +* *Generation schematics* can tell the `ng generate` subcommands how to modify projects, add configurations and scripts, and scaffold artifacts that are defined in your library. |
| 46 | + |
| 47 | +* An *update schematic* can tell the `ng update` command how to update your library's dependencies and adjust for breaking changes when you release a new version. |
| 48 | + |
| 49 | +For more details of what these look like and how to create them, see: |
| 50 | +* [Authoring Schematics](guide/schematics-authoring) |
| 51 | +* [Schematics for Libraries](guide/schematics-for-libraries) |
| 52 | + |
| 53 | +### Add schematics |
| 54 | + |
| 55 | +An add schematic is typically supplied with a library, so that the library can be added to an existing project with `ng add`. |
| 56 | +The `add` command uses your package manager to download new dependencies, and invokes an installation script that is implemented as a schematic. |
| 57 | + |
| 58 | +For example, the [`@angular/material`](https://material.angular.io/guide/schematics) schematic tells the `add` command to install and set up Angular Material and theming, and register new starter components that can be created with `ng generate`. |
| 59 | +You can look at this one as an example and model for your own add schematic. |
| 60 | + |
| 61 | +Partner and third party libraries also support the Angular CLI with add schematics. |
| 62 | +For example, `@ng-bootstrap/schematics` adds [ng-bootstrap](https://ng-bootstrap.github.io/) to an app, and `@clr/angular` installs and sets up [Clarity from VMWare](https://vmware.github.io/clarity/documentation/v1.0/get-started). |
| 63 | + |
| 64 | +An add schematic can also update a project with configuration changes, add additional dependencies (such as polyfills), or scaffold package-specific initialization code. |
| 65 | +For example, the `@angular/pwa` schematic turns your application into a PWA by adding an app manifest and service worker, and the `@angular/elements` schematic adds the `document-register-element.js` polyfill and dependencies for Angular Elements. |
| 66 | + |
| 67 | +### Generation schematics |
| 68 | + |
| 69 | +Generation schematics are instructions for the `ng generate` command. |
| 70 | +The documented sub-commands use the default Angular generation schematics, but you can specify a different schematic (in place of a sub-command) to generate an artifact defined in your library. |
| 71 | + |
| 72 | +Angular Material, for example, supplies generation schematics for the UI components that it defines. |
| 73 | +The following command uses one of these schematics to render an Angular Material `<mat-table>` that is pre-configured with a datasource for sorting and pagination. |
| 74 | + |
| 75 | +<code-example language="bash"> |
| 76 | +ng generate @angular/material:table <component-name> |
| 77 | +</code-example> |
| 78 | + |
| 79 | +### Update schematics |
| 80 | + |
| 81 | + The `ng update` command can be used to update your workspace's library dependencies. If you supply no options or use the help option, the command examines your workspace and suggests libraries to update. |
| 82 | + |
| 83 | +<code-example language="bash"> |
| 84 | +ng update |
| 85 | + We analyzed your package.json, there are some packages to update: |
| 86 | + |
| 87 | + Name Version Command to update |
| 88 | + -------------------------------------------------------------------------------- |
| 89 | + @angular/cdk 7.2.2 -> 7.3.1 ng update @angular/cdk |
| 90 | + @angular/cli 7.2.3 -> 7.3.0 ng update @angular/cli |
| 91 | + @angular/core 7.2.2 -> 7.2.3 ng update @angular/core |
| 92 | + @angular/material 7.2.2 -> 7.3.1 ng update @angular/material |
| 93 | + rxjs 6.3.3 -> 6.4.0 ng update rxjs |
| 94 | + |
| 95 | + |
| 96 | + There might be additional packages that are outdated. |
| 97 | + Run "ng update --all" to try to update all at the same time. |
| 98 | +</code-example> |
| 99 | + |
| 100 | +If you pass the command a set of libraries to update (or the `--all` flag), it updates those libraries, their peer dependencies, and the peer dependencies that depend on them. |
| 101 | + |
| 102 | +<div class="alert is-helpful"> |
| 103 | + |
| 104 | +If there are inconsistencies (for example, if peer dependencies cannot be matched by a simple [semver](https://semver.io/) range), the command generates an error and does not change anything in the workspace. |
| 105 | + |
| 106 | +We recommend that you do not force an update of all dependencies by default. Try updating specific dependencies first. |
| 107 | + |
| 108 | +For more about how the `ng update` command works, see [Update Command](https://github.com/angular/angular-cli/blob/master/docs/specifications/update.md). |
| 109 | + |
| 110 | +</div> |
| 111 | + |
| 112 | +If you create a new version of your library that introduces potential breaking changes, you can provide an *update schematic* to enable the `ng update` command to automatically resolve any such changes in the project being updated. |
| 113 | + |
| 114 | +For example, suppose you want to update the Angular Material library. |
| 115 | + |
| 116 | +<code-example language="bash"> |
| 117 | +ng update @angular/material |
| 118 | +</code-example> |
| 119 | + |
| 120 | +This command updates both `@angular/material` and its dependency `@angular/cdk` in your workspace's `package.json`. |
| 121 | +If either package contains an update schematic that covers migration from the existing version to a new version, the command runs that schematic on your workspace. |
0 commit comments