Stencil components in Angular
Stencil is not a JS framework. It is a compiler that produces a reusable web component that can be embedded anywhere else.
This is a step by step guide to consume a non-trivial stencil component in an Angular app.
The starter Angular app was created with Angular CLI.
Similar guides
Table of contents
0: Build a stenciljs component and publish it to npm
Creating your first stencil component is very easy and it is well documented here.
This example will consume two components:
- @openchemistry/molecule-vtkjs : To display molecular structures
- split-me : To create resizable split layouts
1: Add the component(s) to the dependencies
Add the component to the app dependencies in package.json
// package.json "dependencies":
2: Import the component(s)
Import the component in the main.js
of the app:
;; ;;
3: Consume the component
To prevent Angular from complaining that there is an unrecognized component tag, add CUSTOM_ELEMENTS_SCHEMA
to the schemas
array in app.module.ts
.
;; ;
It is now possible to use the tag provided by the stencil component in any template of the app.