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:


    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:



    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.