Skip to content

Latest commit

 

History

History
91 lines (75 loc) · 2.18 KB

Readme.md

File metadata and controls

91 lines (75 loc) · 2.18 KB

How to: Create a new widget with angular elements

  • Create a new angular project in the 'src' folder and prepare it for web component deployment:

    ng new WIDGETNAME
    ng add @angular/elements
    npm i fs-extra concat --save-dev
    
  • Create widget-dist.js and widget-config.json in the root folder of your project:

    widget-dist.js

    const fs = require('fs-extra');
    const concat = require('concat');
    (function build() {
        fs.readFile(require.resolve('./widget-config.json'), async (config) => {
            const files = [`./dist/${config.id}/main.js`, './dist/${config.id}/polyfills.js', './dist/${config.id}/runtime.js'];
            await fs.ensureDir(`../../dist/${config.id}/`);
            await fs.copy(`widget-config.json', '../../dist/${config.id}/widget.json`);
            await concat(files, `../../dist/${config.id}/widget.js`);
        });
    })();
    

    widget-config.json

    {
        "id": "WIDGETIDENTIFIER",
        "name": "WIDGETNAME",
        "description": "WIDGETDESCRIPTION",
        "color": "#0094ff",
        "icon": "bullseye",
        "iconColor": "white",
        "placeholder": [
            {
                "id": "placeholder1",
                "name": "Placeholder 1",
                "description": "Test 1"
            },
            {
                "id": "placeholder2",
                "name": "Placeholder 2",
                "description": "Test 2"
            },
        ]
    }
    
  • Create WIDGETNAME.component and add ShadowDom encapsulation:

    @Component({
        ...
        encapsulation: ViewEncapsulation.ShadowDom,
    })
    
  • Modify app.module:

    @NgModule({
        ...
        entryComponents: [WIDGETNAMEComponent],
    })
    export class AppModule {
        constructor(private _injector: Injector) {}
    
        ngDoBootstrap() {
            const customElement = createCustomElement(WIDGETNAMEComponent, {
                injector: this._injector,
            });
            customElements.define('hub-widget-WIDGETNAME', customElement);
        }
    }
    
  • Add the following line to the 'scripts' area of the package.json:

    "build:elements": "ng build --prod --output-hashing=none && node widget-dist.js"
    
  • Deploy web component:

    npm run build:elements