service-configurator

USING STENCIL WEB COMPONENT

creating stencil javascript bundle

• cd stencil
• npm run build

to add to local node_modules for testing

• npm link

to use in simple html page

• cd stencil
• npm run build
• copy dist folder
• cd html
• paste
• import to html head the following tags

<script type="module" src="dist/configurator/configurator.esm.js"></script>
<script nomodule src="dist/esm/configurator.js"></script>

• add web component tag to body

<service-configurator savedServices="[]" services="[]"></service-configurator>

to use in angular app

• cd stencil
• npm run build
• npm link
• cd angular-app
• npm link configurator (name of the stencil project)
• import the following package to main.ts

import { defineCustomElements } from 'service-configurator/loader';

• add the following line to main.ts

defineCustomElements(window);

• add CUSTOM_ELEMENTS_SCHEMA to schemas to the module of the page you want to add the web component

• add web component tag to desired html page

<service-configurator savedServices="[]" services="[]"></service-configurator>

to use in react app

• cd stencil
• npm run build
• npm link
• cd react-app
• npm link configurator (name of the stencil project)
• import the following package to App.js

import { defineCustomElements } from 'service-configurator/loader';

• add the following line to App.js

defineCustomElements(window);

• add web component tag to desired component

<service-configurator savedServices="[]" services="[]"></service-configurator>

to use in vue app

• cd stencil
• npm run build
• npm link
• cd vue-app
• npm link configurator (name of the stencil project)
• import the following package to main.js

import { defineCustomElements } from 'service-configurator/loader';

• add the following lines to main.js

defineCustomElements(window);
//you might need
Vue.config.ignoredElements = ["service-configurator-component"];

• add web component tag to desired component

<service-configurator savedServices="[]" services="[]"></service-configurator>