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

[laurentsd]

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)

[laurentsd]

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.

[Flying_Cat]

Hi laurentsd, do you have some good IDE tools recommended for developing HTML plugin with Angular 2+? Our team is using VS Code now.

[laurentsd]

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.

[Flying_Cat]

Thanks for your sharing.

[Flying_Cat]

Hi laurentsd, I'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.

[laurentsd]

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.

[Flying_Cat]

Thanks again for your explanation.

[laurentsd]

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

[Flying_Cat]

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?

[Flying_Cat]

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>

...

[admin]

Thx for ur advic laurentsd

[Moderator note: spam link removed.]

[Flying_Cat]

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.

[laurentsd]

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.

[Flying_Cat]

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.

[Flying_Cat]

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.                                                                                                          

[laurentsd]

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.

[Flying_Cat]

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

[htlotjrkryk5]

Thanks for the info.

จีคลับ