Stenciljs components in Angular: step by step guide
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.
Creating your first stencil component is very easy and it is well documented here.
This example will consume two components:
Add the component to the app dependencies in package.json
// package.json
"dependencies": {
...
"@openchemistry/molecule-vtkjs": "^0.3.2",
"split-me": "^1.1.4"
}
Import the component in the main.js
of the app:
import { defineCustomElements as defineMolecule } from '@openchemistry/molecule-vtkjs/dist/loader';
import { defineCustomElements as defineSplitMe } from 'split-me/dist/loader';
defineMolecule(window);
defineSplitMe(window);
To prevent Angular from complaining that there is an unrecognized component tag, add CUSTOM_ELEMENTS_SCHEMA
to the schemas
array in app.module.ts
.
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule { }
It is now possible to use the tag provided by the stencil component in any template of the app.
<split-me n="2">
<oc-molecule-vtkjs slot="0" [cjson]="molecule0"></oc-molecule-vtkjs>
<oc-molecule-vtkjs slot="1" [cjson]="molecule1"></oc-molecule-vtkjs>
</split-me>