5 lines
34 KiB
JSON
5 lines
34 KiB
JSON
|
{
|
||
|
|
"id": "guide/schematics-for-libraries",
|
||
|
|
"title": "Schematics for libraries",
|
||
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/schematics-for-libraries.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"schematics-for-libraries\">Schematics for libraries<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/schematics-for-libraries#schematics-for-libraries\"><i class=\"material-icons\">link</i></a></h1>\n<p>When you create an Angular library, you can provide and package it with schematics that integrate it with the Angular CLI.\nWith your schematics, your users can use <code>ng add</code> to install an initial version of your library,\n<code>ng generate</code> to create artifacts defined in your library, and <code>ng update</code> to adjust their project for a new version of your library that introduces breaking changes.</p>\n<p>All three types of schematics can be part of a collection that you package with your library.</p>\n<p>Download the <live-example downloadonly=\"\">library schematics project</live-example> for a completed example of the steps below.</p>\n<h2 id=\"creating-a-schematics-collection\">Creating a schematics collection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/schematics-for-libraries#creating-a-schematics-collection\"><i class=\"material-icons\">link</i></a></h2>\n<p>To start a collection, you need to create the schematic files.\nThe following steps show you how to add initial support without modifying any project files.</p>\n<ol>\n<li>\n<p>In your library's root folder, create a <code>schematics/</code> folder.</p>\n</li>\n<li>\n<p>In the <code>schematics/</code> folder, create an <code>ng-add/</code> folder for your first schematic.</p>\n</li>\n<li>\n<p>At the root level of the <code>schematics/</code> folder, create a <code>collection.json</code> file.</p>\n</li>\n<li>\n<p>Edit the <code>collection.json</code> file to define the initial schema for your collection.</p>\n</li>\n</ol>\n<code-example header=\"projects/my-lib/schematics/collection.json (Schematics Collection)\" path=\"schematics-for-libraries/projects/my-lib/schematics/collection.1.json\">\n{\n \"$schema\": \"../../../node_modules/@angular-devkit/schematics/collection-schema.json\",\n \"schematics\": {\n \"ng-add\": {\n \"description\": \"Add my library to the project.\",\n \"factory\": \"./ng-add/index#ngAdd\"\n }\n }\n}\n\n</code-example>\n<ul>\n<li>The <code>$schema</code> path is relative to the Angular Devkit collection schema.</li>\n<li>The <code>schematics</code> object describes the named schematics that are part of this collection.</li>\n<li>The first entry is for a schematic named <code>ng-add</code>. It contains the description, and points to the factory function that is called when your schematic is executed.</li>\n</ul>\n<ol>\n<li>In your library project's <code>package.json</code> file, add a \"schematics\" entry with the path to your schema file.\nThe Angular CLI uses this entry to find named schematics in your collection when it runs commands.</li>\n</ol>\n<code-example header=\"projects/my-lib/package.json (Schematics Collection Reference)\" path=\"schematics-for-libraries/projects/my-lib/package.json\" region=\"collection\">\n{\n \"name\": \"my-lib\",\n \"version\": \"0.0.1\",\n \"schematics\": \"./schematics/collection.json\",\n}\n\n\n</code-example>\n<p>The initial schema that you have created tells the CLI where to find the schematic that supports the <code>ng add</code> command.\nNow you are ready to create that schematic.</p>\n<h2 id=\"providing-installation-support\">Providing installation support<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/schematics-for-libraries#providing-installation-support\"><i class=\"material-icons\">link</i></a></h2>\n<p>A schematic for the <code>ng add</code>
|
||
|
|
}
|