Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

Creating Angular2+ Widget extension

Level 8

Creating Angular2+ Widget extension

I have an example of an Angular 1.5 app/extension here: (AngularButtonWidget.runtime.js)

that is bootstrapped at "afterRender" stage using the life-cycle hooks of Thingworx.

This is from this package:Integrating AngularJS with ThingWorx

At run time there is  combined.js file containing: angular.min.js, angular-animate.min.js, angular-material.min.js

Then one writes and extension for Angular Button: AngularButtonWidget.runtime.js and some .html and .css files that will be used at runtime Web mashup page which will load this widget and bootstrap angular this way:

angular.bootstrap(jqElement[0], [thisWidget.jqElementId]);

I am trying to find a way how to do it with Angular 2+.

Can someone take a look at this Plunk example which uses Typescript transpiler in the browser:

and open preview page in its own window and use Google Chrome tool to see the source files.

system.js is used to dynamically load dependent js libraries:

On the left side you can see .ts and .js transpiled files.

Basically I want everything that is transpiled like:!transpiled!transpiled

as well as other dependent js libraries, Angular 2+ needs, combined into one on the server side and to bootstrap my Angular 2+ app by writing

AngularButtonWidget.runtime.js using Angular 2.




Re: Creating Angular2+ Widget extension

Andrei Valeanu​ - Is this something you can review and suggest. I see you had worked on and provided  Angular JS ThingWorx extension however need feedback on Angular 2+ query.



Re: Creating Angular2+ Widget extension

Hello Durgesh,

Unfortunately i don't have that much experience with Angular2 and its runtime and i am tied into other projects at the moment. My main concern is that Angular2+ is written with typescript and i don't recall it having external hooks for bootstrapping as Angular1 did.

Best regards,
Valeanu Andrei.

Re: Creating Angular2+ Widget extension


Whenever it is convenient to you we can organize a session to try to come up with an Angular 5 widget component or even panel that can hold other components.

Here is what I am going to use to attempt the integration:

      this shows Angular 4.3 solution for dynamically bootstraping a component

      angular-h312t4 - StackBlitz​ This shows an angular project​  This page shows Javascript transpiled code

The highlighted link is probably showing the solution. Typescript will be transpiled to Javascript so that is not the problem.

From: "Get bootstraped component" post.

: [Components, // directives, components, and pipes owned by this NgModule
: [BrowserModule, HttpModule, FormsModule],
: Providers,
: [Menu, Main]
// bootstrap: [Menu, Main]
export class MenuModule {
(appRef: ApplicationRef) {
const compRefMenu = appRef.bootstrap(Menu);
const compRefMain = appRef.bootstrap(Main);