3 Replies Latest reply on Nov 10, 2017 3:07 PM by rradivojevic RSS
    rradivojevic Explorer

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