CODEWITHSUNDEEP
angularnpmangular-componentsangular-librarynpm-package
Havoc
Havoc

Reputation: 11

What is the proper way to create an Angular Library with multiple components?

I am refactoring the core components that make up a lookup page into an angular library. I would like to have multiple components in this angular library, i.e. LookupControls, PagingHeader, PagingFooter, etc. I want to be able to put <lookup-controls></lookup-controls>, <paging-header></paging-header>, and <paging-footer></paging-footer> in the HTML in an angular application project where this library is installed as an npm package and use the components individually.

What is the proper way to do this?

Upvotes: 1

Views: 5068

Answers (3)

felix
felix

Reputation: 31

  • First, create your library, ex :

ng generate library mylib

  • Then, create a component into your lib, ex:

ng generate component lookup-controls --project mylib

And the magic works !

Angular will not ask you which type of style you want to use. You can specify it in the command, ex :

ng generate component lookup-controls --style=scss --project mylib

Hope it can help you or someone else :)

Upvotes: 3

Maxime
Maxime

Reputation: 2234

If you don't want to use the Angular CLI to build an Angular library (or if you haven't the right CLI version which implements it) you can use the angular-library-starter made by Roberto Simonetti. This starter allows you to create a library for Angular apps compatible with AoT compilation and Tree shaking like an official package. The project is based on the official Angular packages.

It's with this starter that I made my first library ngx-smart-modal and other libraries. Easy to build, test and maintain.

This starter comes with an example lib you can use and play with to get familiar with it.

Upvotes: 1

Adam Dunkerley
Adam Dunkerley

Reputation: 702

The Angular docs have a useful guide on creating libraries with the CLI.

I've used that guide to create a couple libraries recently, one of which features 3 components. I found that it is best to create the library in a separate directory from the application that currently contains the components your are refactoring out, since it avoids some issues with testing your library locally by using it in your app.

Upvotes: 1

Related Questions