vSphere

 View Only
Expand all | Collapse all

new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

htlotjrkryk5

htlotjrkryk5May 08, 2017 07:39 AM

  • 1.  new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Broadcom Employee
    Posted Feb 27, 2017 10:34 PM

    hi everyone,

    Please check out this new tool called "HTML Client Plugin Seed" to help you make the transition to HTML plugins:

    • It is based on HTML SDK 6.5, so the generated plugin is compatible with both HTML Client 6.5 and Flex Client 6.0 or 6.5.
    • The UI is 100% based on the Clarity Design System, a VMware open-source project.
    • It uses the Angular 2+ framework and the Typescript language which have become industry standard for modern web applications.
    • It comes with utilities and development tools that will speed up your development cycles, help you start with a good architecture and show you many best practices and patterns.

    I look forward to your feedback!

    (Check out the small survey at the very end of the PDF doc)

    --Laurent

    Message was edited by: Laurent Delamare plugin-seed.zip was missing some files. Please update to the correct version (242 KB)



  • 2.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Broadcom Employee
    Posted Feb 28, 2017 05:11 PM

    There were some missing files inside plugin-seed.zip that I posted yesterday and I corrected this last night. Make sure you have the copy of plugin-seed.zip that is 242K in size. Thanks.



  • 3.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Mar 15, 2017 10:41 AM
    Hi laurentsd, do you have some good IDE tools recommended for developing HTML plugin with Angular 2+? Our team is using VS Code now.


  • 4.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Broadcom Employee
    Posted Mar 15, 2017 04:53 PM

    Our team uses IntelliJ because it has good support for many languages, especially Javascript, Typescript and Java.

    Webstorm is a "subset" of IntelliJ geared specifically towards JS and TS.



  • 5.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Mar 16, 2017 01:54 AM

    Thanks for your sharing. :smileyhappy:



  • 6.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Mar 21, 2017 02:42 AM

    Hi laurentsdI'm sorry to bother you again. I have one question for building our UI project using Angular 2+ and TS.

    I do not have much knowledge on Angular CLI. Do you think use Angular CLI is better than Webpack to compile and build UI project? 

    Because Angular CLI is still in Release Candidate, maybe it has many issues and is not stable. And our team also has some concerns of using Angular CLI in current stage:

    1.It provides only default webpack functionalities. 

    2.Its relatively slow compared to webpack. 

    3.Change of webpack configuration for new changes in bundling activities may be difficult in later stages of project.

    Do you have any suggestion for us? Thank you very much.



  • 7.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Broadcom Employee
    Posted Mar 21, 2017 08:52 PM
    Angular-CLI includes webpack, so you get all the advantages and it's much simpler to get started (I am not aware of any speed issue).  In addition Angular-CLI provides many commands that can be useful.   The only drawback of Angular-CLI at the moment is the lack of customization if you need a special webpack configuration but they said they would provide that soon.


  • 8.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Mar 22, 2017 03:26 AM

    Thanks again for your explanation.



  • 9.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Broadcom Employee
    Posted Mar 22, 2017 05:16 PM

    From now on this plugin seed is available on the HTML5 Client Fling page at https://labs.vmware.com/flings/vsphere-html5-web-client

    You can get the latest version from the download menu: plugin-seed-0.9.4.zip



  • 10.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Mar 27, 2017 10:19 AM

    Hi laurentsd​, I found a blocked issue when I built war package using build-war.xml for seed-ui project in cmd prompt, I got this error:

    C:\Users\gengp1\Work\SourceCode\vsi_h5_ui\vsi-ui\tools>build-war.bat                                                                                      

    Buildfile: C:\Users\gengp1\Work\SourceCode\vsi_h5_ui\vsi-ui\tools\build-war.xml                                                                           

                                                                                                                                                              

    clean:                                                                                                                                                    

                                                                                                                                                              

    ng-build:                                                                                                                                                 

                                                                                                                                                              

    BUILD FAILED                                                                                                                                              

    C:\Users\gengp1\Work\SourceCode\vsi_h5_ui\vsi-ui\tools\build-war.xml:46: Execute failed: java.io.IOException: Cannot run program "ng" (in directory "C:\Users\

    gengp1\Work\SourceCode\vsi_h5_ui\vsi-ui\node_modules\@angular\cli\commands"): CreateProcess error=2, The system cannot find the file specified            

            at java.lang.ProcessBuilder.start(ProcessBuilder.java:1048)                                                                                       

            at java.lang.Runtime.exec(Runtime.java:620)                                                                                                       

            at org.apache.tools.ant.taskdefs.launcher.Java13CommandLauncher.exec(Java13CommandLauncher.java:58)                                               

            at org.apache.tools.ant.taskdefs.Execute.launch(Execute.java:426)                                                                                 

            at org.apache.tools.ant.taskdefs.Execute.execute(Execute.java:440)                                                                                

            at org.apache.tools.ant.taskdefs.ExecTask.runExecute(ExecTask.java:629)                                                                           

            at org.apache.tools.ant.taskdefs.ExecTask.runExec(ExecTask.java:670)                                                                              

            at org.apache.tools.ant.taskdefs.ExecTask.execute(ExecTask.java:496)                                                                              

            at org.apache.tools.ant.UnknownElement.execute(UnknownElement.java:293)                                                                           

            at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)                                                                                    

            at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)                                                                  

            at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)                                                          

            at java.lang.reflect.Method.invoke(Method.java:497)                                                                                               

            at org.apache.tools.ant.dispatch.DispatchUtils.execute(DispatchUtils.java:106)                                                                    

            at org.apache.tools.ant.Task.perform(Task.java:348)                                                                                               

            at org.apache.tools.ant.Target.execute(Target.java:435)                                                                                           

            at org.apache.tools.ant.Target.performTasks(Target.java:456)                                                                                      

            at org.apache.tools.ant.Project.executeSortedTargets(Project.java:1405)                                                                           

            at org.apache.tools.ant.Project.executeTarget(Project.java:1376)                                                                                  

            at org.apache.tools.ant.helper.DefaultExecutor.executeTargets(DefaultExecutor.java:41)                                                            

            at org.apache.tools.ant.Project.executeTargets(Project.java:1260)                                                                                 

            at org.apache.tools.ant.Main.runBuild(Main.java:857)                                                                                              

            at org.apache.tools.ant.Main.startAnt(Main.java:236)                                                                                              

            at org.apache.tools.ant.launch.Launcher.run(Launcher.java:287)                                                                                    

            at org.apache.tools.ant.launch.Launcher.main(Launcher.java:113)                                                                                   

    Caused by: java.io.IOException: CreateProcess error=2, The system cannot find the file specified                                                          

            at java.lang.ProcessImpl.create(Native Method)                                                                                                    

            at java.lang.ProcessImpl.<init>(ProcessImpl.java:386)                                                                                             

            at java.lang.ProcessImpl.start(ProcessImpl.java:137)                                                                                              

            at java.lang.ProcessBuilder.start(ProcessBuilder.java:1029)                                                                                       

            ... 24 more                                                                                                                                       

                                                                                                                                                              

    Total time: 1 second    

    But when I executed "ng build" directly under the source folder, it is successful:

    C:\Users\gengp1\Work\SourceCode\vsi_h5_ui\vsi-ui>ng build                                     

    Hash: 3bac39521e8885097bd8                                                                    

    Time: 38513ms                                                                                 

    chunk    {0} main.bundle.js, main.bundle.js.map (main) 185 kB {3} [initial] [rendered]        

    chunk    {1} scripts.bundle.js, scripts.bundle.js.map (scripts) 553 kB {4} [initial] [rendered]

    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 805 kB {4} [initial] [rendered]  

    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.67 MB [initial] [rendered]     

    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]       

                                                                                                                               

    And I searched a solution by google, but cannot find some useful message. Has your team ever encountered this problem?



  • 11.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Mar 28, 2017 05:58 AM

    Hi laurentsd​, one solution to fix my issue are following steps:

    Firstly, we should install node and npm under seed-ui project.

    Then configure ant build file like this:

    ...

    <property name="NG_HOME" value="${basedir}/node_modules/@angular/cli/bin/ng"/>

    ...

    <target name="ng-build">

          <exec executable="node">

             <arg value="${NG_HOME}"/>

             <arg value="build"/>

          </exec>

       </target>

    ...



  • 12.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Mar 30, 2017 04:59 AM

    Thx for ur advic laurentsd

    [Moderator note: spam link removed.]



  • 13.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Apr 01, 2017 08:02 AM

    Hi laurentsd​ and aihumlae​, do your team face some issues when optimizing plugin using 'ng build' with '--prod' and '--aot' options for production? For instance, run 'ng build --prod --aot' in ui project, we get errors like this:

    C:\Users\gengp1\Work\SourceCode\vsi_h5_ui\vsi-ui>ng build --prod

    Hash: e61141b80d388c5821d1

    Time: 77474ms

    chunk    {0} 0.61f9c44c941dfaf5ee13.chunk.js 5.73 kB {1} [rendered]

    chunk    {1} main.b192b51f821a603eeebe.bundle.js (main) 1.11 MB {4} [initial] [rendered]

    chunk    {2} scripts.ccae0d17f324b95caac3.bundle.js (scripts) 576 kB {5} [initial] [rendered]

    chunk    {3} styles.7291c38157c5ba8a68ed.bundle.css (styles) 175 bytes {5} [initial] [rendered]

    chunk    {4} vendor.0405bc9eba2224942759.bundle.js (vendor) 2.48 MB [initial] [rendered]

    chunk    {5} inline.6381d29c4feb106cedf5.bundle.js (inline) 0 bytes [entry] [rendered]

    ERROR in C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/modals/sis-dialog.component.ngfactory.t

    s (1164,45): Property 'gs' is private and only accessible within class 'SISDialogComponent'.

    ERROR in C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/app-routing.component.ngfactory.ts (225,49):

    Property 'gs' is private and only accessible within class 'AppRoutingComponent'.

    ERROR in C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/main/main.component.ngfactory.ts (1064,

    44): Property 'gs' is private and only accessible within class 'MainComponent'.

    C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/main/main.component.ngfactory.ts (1091,45): Prop

    erty 'gs' is private and only accessible within class 'MainComponent'.

    C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/main/main.component.ngfactory.ts (1094,45): Prop

    erty 'gs' is private and only accessible within class 'MainComponent'.

    C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/main/main.component.ngfactory.ts (1097,50): Prop

    erty 'gs' is private and only accessible within class 'MainComponent'.

    C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/main/main.component.ngfactory.ts (1345,48): Prop

    erty 'nav' is private and only accessible within class 'MainComponent'.

    ERROR in C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/modals/sis-dialog.component.ngfactory.t

    s (1164,45): Property 'gs' is private and only accessible within class 'SISDialogComponent'.

    ERROR in C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/monitor/monitor.component.ngfactory.ts

    (921,44): Property 'gs' is private and only accessible within class 'MonitorComponent'.

    C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/monitor/monitor.component.ngfactory.ts (924,45):

    Property 'gs' is private and only accessible within class 'MonitorComponent'.

    C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/monitor/monitor.component.ngfactory.ts (930,51):

    Property 'gs' is private and only accessible within class 'MonitorComponent'.

    C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/monitor/monitor.component.ngfactory.ts (933,51):

    Property 'gs' is private and only accessible within class 'MonitorComponent'.

    ERROR in C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/summary/summary.component.ngfactory.ts

    (484,44): Property 'gs' is private and only accessible within class 'SummaryComponent'.

    C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/summary/summary.component.ngfactory.ts (487,45):

    Property 'gs' is private and only accessible within class 'SummaryComponent'.

    C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/summary/summary.component.ngfactory.ts (490,45):

    Property 'gs' is private and only accessible within class 'SummaryComponent'.

    C:/Users/gengp1/Work/SourceCode/vsi_h5_ui/vsi-ui/src/$$_gendir/app/views/summary/summary.component.ngfactory.ts (493,45):

    Property 'gs' is private and only accessible within class 'SummaryComponent'.

    And I find the issue has been reported on Angular-CLI github: Property is private and only accessible within class · Issue #5621 · angular/angular-cli · GitHub

    But they only fixed it in Angular 4.0, do you think we need to upgrade Angular 2.4 to 4.0? Or any other suggestions to fix this issue?

    Very much hope to get your help.



  • 14.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Broadcom Employee
    Posted Apr 06, 2017 01:43 PM

    I don't see this build issue with --prod and --aot options but my project is still using Angular-CLI 1.0.0-rc.2

    It looks like you upgraded to CLI 1.0.0, right?

    To be unblocked I would recommend to stay with 1.0.0-rc.2 for now.

    I need to spend some time reviewing the upgrade to  Angular-CLI 1.0.0 and Angular 4.0.0.  But if you have already done it and want to share your findings, please do! Thanks.



  • 15.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Apr 07, 2017 06:23 AM

    Hi laurentsd​, I have resolved it using Angular 2.4.10, Angular-CLI 1.0.0-rc.2, and Typescript 2.1.6.

    Thanks for your reply.



  • 16.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Apr 10, 2017 09:30 AM

    Hi laurentsd​, when I want a fast development in plugin mode, I use the manual way to refresh the plugin UI. Simply do :

    cd tools

    ./deploy-war.bat

    Then rebuilds the plugin .war file successfully and copies it to the Virgo pickup directory at <SDK_HOME>/vsphere-ui/server/pickup/ .

    But I get errors when I track the redeploy in the Virgo console like this:

    [2017-04-10T17:08:44.003+08:00] [INFO ] fs-watcher                    <HD0001I> Hot deployer processing 'CREATED' event for file 'vsi-ui-1.0.0-SNAPSHOT.war'.                                                           [2017-04-10T17:08:44.032+08:00] [ERROR] fs-watcher                    <HD0002E> Hot deploy failed for file 'vsi-ui-1.0.0-SNAPSHOT.war'. org.eclipse.virgo.nano

    .deployer.api.core.DeploymentException: The artifact bundle 'com.emc.vsi.vsi-ui' version '1.0.0' in scope 'null' at URI 'file:/C:/Users/gengp1/Work/vSphere6.5

    /HTML-C~1/VSPHER~1/server/pickup/vsi-ui-1.0.0-SNAPSHOT.war' cannot be stored in the runtime artifact model as it clashes with the artifact bundle 'com.emc.vsi

    .vsi-ui' version '1.0.0' in scope 'null' which is already present.                                                                                           

            at org.eclipse.virgo.kernel.deployer.core.internal.PipelinedApplicationDeployer.doInstall(PipelinedApplicationDeployer.java:179)                     

            at org.eclipse.virgo.kernel.deployer.core.internal.PipelinedApplicationDeployer.install(PipelinedApplicationDeployer.java:140)                       

            at org.eclipse.virgo.kernel.deployer.core.internal.PipelinedApplicationDeployer.deploy(PipelinedApplicationDeployer.java:253)                        

            at org.eclipse.virgo.nano.deployer.hot.HotDeploymentFileSystemListener.deploy(HotDeployerFileSystemListener.java:225)                                

            at org.eclipse.virgo.nano.deployer.hot.HotDeploymentFileSystemListener.onChange(HotDeployerFileSystemListener.java:79)                               

            at org.eclipse.virgo.util.io.FileSystemChecker.notifyListeners(FileSystemChecker.java:380)                                                           

            at org.eclipse.virgo.util.io.FileSystemChecker.check(FileSystemChecker.java:289)                                                                     

            at org.eclipse.virgo.nano.deployer.hot.WatchTask.run(WatchTask.java:49)                                                                              

            at java.lang.Thread.run(Thread.java:745)                                                                                                             

    Caused by: org.eclipse.virgo.kernel.deployer.model.DuplicateFileNameException: The artifact bundle 'com.emc.vsi.vsi-ui' version '1.0.0' in scope 'null' at URI

    'file:/C:/Users/gengp1/Work/vSphere6.5/HTML-C~1/VSPHER~1/server/pickup/vsi-ui-1.0.0-SNAPSHOT.war' cannot be stored in the runtime artifact model as it clashe

    s with the artifact bundle 'com.emc.vsi.vsi-ui' version '1.0.0' in scope 'null' which is already present.                                                    

            at org.eclipse.virgo.kernel.deployer.model.internal.StandardRuntimeArtifactModel.checkFileName(StandardRuntimeArtifactModel.java:100)                

            at org.eclipse.virgo.kernel.deployer.model.internal.StandardRuntimeArtifactModel.add(StandardRuntimeArtifactModel.java:78)                           

            at org.eclipse.virgo.kernel.deployer.core.internal.PipelinedApplicationDeployer.addGraphToModel(PipelinedApplicationDeployer.java:303)               

            at org.eclipse.virgo.kernel.deployer.core.internal.PipelinedApplicationDeployer.doInstall(PipelinedApplicationDeployer.java:174)                     

            ... 8 common frames omitted 

    I have already set the attribute 'scope' equals to 'global', what other missing things I still need to do? Thanks in advance.                                                                                                          



  • 17.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Broadcom Employee
    Posted Apr 10, 2017 06:35 PM

    From now on I'd prefer that you start a new thread for each issue/question on plugin-seed. Thanks!

    Regarding your last question it seems that you are mixing up 2 versions of your UI bundles. Make sure you are hot deploying the same one.  If this is not the case please start a new thread and explain the problem in more details. Thanks.



  • 18.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted Apr 11, 2017 01:02 AM

    Okay, I will start a new thread to explain more details for this issue.

    I created a new discussion for this issue, reference Unable to redeploy plugin UI(based on new HTML seed projects) for fast development in plugin mode



  • 19.  RE: new HTML plugin seed with Angular 2+ / Typescript / Clarity stack

    Posted May 08, 2017 07:39 AM

    Thanks for the info.

    จีคลับ