angular-cn/aio/dist/generated/docs/guide/creating-libraries.json

5 lines
20 KiB
JSON
Raw Permalink Normal View History

{
"id": "guide/creating-libraries",
"title": "Creating libraries",
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/creating-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=\"creating-libraries\">Creating libraries<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/creating-libraries#creating-libraries\"><i class=\"material-icons\">link</i></a></h1>\n<p>This page provides a conceptual overview of how you can create and publish new libraries to extend Angular functionality.</p>\n<p>If you find that you need to solve the same problem in more than one app (or want to share your solution with other developers), you have a candidate for a library.\nA simple example might be a button that sends users to your company website, that would be included in all apps that your company builds.</p>\n<h2 id=\"getting-started\">Getting started<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/creating-libraries#getting-started\"><i class=\"material-icons\">link</i></a></h2>\n<p>Use the Angular CLI to generate a new library skeleton in a new workspace with the following commands.</p>\n<code-example language=\"bash\">\n ng new my-workspace --create-application=false\n cd my-workspace\n ng generate library my-lib\n</code-example>\n<p>The <code>ng generate</code> command creates the <code>projects/my-lib</code> folder in your workspace, which contains a component and a service inside an NgModule.</p>\n<div class=\"alert is-helpful\">\n<p> For more details on how a library project is structured, refer to the <a href=\"guide/file-structure#library-project-files\">Library project files</a> section of the <a href=\"guide/file-structure\">Project File Structure guide</a>.</p>\n<p> You can use the monorepo model to use the same workspace for multiple projects.\nSee <a href=\"guide/file-structure#multiple-projects\">Setting up for a multi-project workspace</a>.</p>\n</div>\n<p>When you generate a new library, the workspace configuration file, <code>angular.json</code>, is updated with a project of type <code>library</code>.</p>\n<code-example format=\"json\">\n\"projects\": {\n ...\n \"my-lib\": {\n \"root\": \"projects/my-lib\",\n \"sourceRoot\": \"projects/my-lib/src\",\n \"projectType\": \"library\",\n \"prefix\": \"lib\",\n \"architect\": {\n \"build\": {\n \"builder\": \"@angular-devkit/build-angular:ng-packagr\",\n ...\n</code-example>\n<p>You can build, test, and lint the project with CLI commands:</p>\n<code-example language=\"bash\">\n ng build my-lib --configuration development\n ng test my-lib\n ng lint my-lib\n</code-example>\n<p>Notice that the configured builder for the project is different from the default builder for app projects.\nThis builder, among other things, ensures that the library is always built with the <a href=\"guide/aot-compiler\">AOT compiler</a>.</p>\n<p>To make library code reusable you must define a public API for it. This \"user layer\" defines what is available to consumers of your library. A user of your library should be able to access public functionality (such as NgModules, service providers and general utility functions) through a single import path.</p>\n<p>The public API for your library is maintained in the <code>public-api.ts</code> file in your library folder.\nAnything exported from this file is made public when your library is imported into an application.\nUse an NgModule to expose services and components.</p>\n<p>Your library should supply documentation (typically a README file) for installation and maintenance.</p>\n<h2 id=\"refactoring-parts-of-an-app-into-a-library\">Refactoring parts of an app into a library<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/creating-libraries#refactoring-parts-of-an-app-into-a-library\"><i class=\"materi
}