Creating Angular2+ Widget extension

[rad1]

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.web.js

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

[dupatel]

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

[avaleanu]

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.

[rad1]

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:

• https://www.lucidchart.com/techblog/2017/04/10/using-angular-2-components-in-a-non-angular-app/
• https://github.com/angular/angular/issues/7136 (the code snippet at the end)
• https://blog.angularindepth.com/how-to-manually-bootstrap-an-angular-application-9a36ccf86429

      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

• angular - Get bootstraped component - Stack Overflow

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);
  }
}