cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
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: https://drive.google.com/file/d/0B1I1nQTGClv3UlRzbHNWc2x5NVU/view?usp=sharing (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:

http://embed.plnkr.co/E0VlJOXriU3Q8aMi07O4/

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:

https://cdn.rawgit.com/angular/angular.io/f2daab7/public/docs/_examples/_boilerplate/systemjs.config...

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

Basically I want everything that is transpiled like:

http://run.plnkr.co/preview/cj9epib1j00073c5sac8fhsrj/app/app.component.ts!transpiled

http://run.plnkr.co/preview/cj9epib1j00073c5sac8fhsrj/app/app.module.ts!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.

Thanks,

Rad

3 REPLIES 3

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.

Thanks,

Durgesh

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

Andrei,

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

      https://angular-h312t4.stackblitz.io/​  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.

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