Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

Stencil to Ionic/Angular

Explore the process of publishing custom Stencil web components to the NPM repository and learn how to integrate these components within Ionic Angular applications. Understand package configuration, build commands, and necessary code adjustments for seamless usage of Stencil components in Ionic projects.

We'll cover the following...

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):

Javascript (babel-node)
{
  "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 ...