Stencil to Ionic/Angular
Learn how to publish a custom Stencil component for use within an Ionic/Angular application.
Publishing custom Stencil components
Publishing a Stencil component for use within an Ionic/Angular project is pretty straightforward, although we will need to have an NPM account for the component to be distributed.
If you don’t have an NPM account, simply go ahead and create one. It’s free to do so, although a free account doesn’t allow publishing to private repositories (this means personal NPM packages will be publicly visible and available for download).
The package.json
file
To begin, we’ll make some amendments to the Stencil project’s package.json
file as follows (some lines have been removed for readability):
{"name": "stencil-gallery","version": "1.0.0","description": "Stencil generated web components for creating a simple Image gallery"// ...}
Here, we are defining the name of our package as stencil-gallery
. This will be the name we use when installing the package via the NPM command line.
Building the package
With this in place, we can now run a Stencil build that will publish the package files to our project’s dist
directory. If necessary, we can always configure the type of build output, amongst other options, within the stencil.config.ts
file (which is used to define the different configurations available for a Stencil project).
This is useful to know about, but we will leave the stencil.config.ts
file in its default state for this chapter.
With the package.json
file configured, we can ...