{"id":1649,"date":"2023-10-19T05:00:00","date_gmt":"2023-10-19T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1649"},"modified":"2023-10-05T14:37:27","modified_gmt":"2023-10-05T21:37:27","slug":"creating-a-library-with-angular","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/creating-a-library-with-angular\/","title":{"rendered":"Creating a library with Angular"},"content":{"rendered":"\n

You’re probably used to creating Angular applications, but what about Angular libraries?<\/p>\n\n\n\n

First, it’s essential to define what an Angular library is. A library is a collection of components\/pipes\/directives or services bundled together that can be shared and used in multiple code repositories. As a result, Angular libraries are designed to be published on npm (publicly or privately) so they can be shared with other people externally or internally.<\/p>\n\n\n\n

<\/p>\n\n\n\n

If you want to start a new library from scratch, these Angular CLI commands will get it done:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above commands create a projects\/my-lib<\/code> folder in the workspace, with a sample component and service in it. The main difference between a library and an application is that a library exposes public features<\/strong> that can be imported into other libraries or applications. <\/p>\n\n\n\n

Such features are listed and exported in public-api.ts<\/code> in the library folder. That’s where you decide what’s public\/private in your library code. In this example, the library is just one service:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Then, to test or build your library, you can use regular Angular CLI commands such as:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Once built, a library can be published to the public npm repository<\/a> with one single command. This command has to be run from the dist<\/code> folder where the compiled library can be found after running your production build<\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Note that this command requires an npm account<\/a> and npm authentication before you can publish. Upon publishing, the version number used in your package.json<\/code> will be used as the public version number on npm:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

And on npm’s website<\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

At that point, anyone can run npm install [your-library-name]<\/code> and use your code in their projects. Nice and easy!<\/p>\n\n\n\n

Note that the library I used in that example is a work in progress and should not be used as-is in your apps.<\/p>\n","protected":false},"excerpt":{"rendered":"

You’re probably used to creating Angular applications, but what about Angular libraries? First, it’s essential to define what an Angular library is. A library is a collection of components\/pipes\/directives or services bundled together that can be shared and used in multiple code repositories. As a result, Angular libraries are designed to be published on npm […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21],"tags":[],"class_list":["post-1649","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1649"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1649\/revisions"}],"predecessor-version":[{"id":1657,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1649\/revisions\/1657"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}