VMware {code} Community
manojmu
Contributor
Contributor

Problems with routing in angular2 based plugin with a global view extension

We started migrating the flex plugin and have come till a way where I see my plugin in the admin category and when I click on it it fecthes some data from a backend and displays on our first screen. All this happens angular2 way. We have components and services so far. The next thing is to move to another page on a button click. For that I was exploring Routing in the sample which is part of Fling. Have couple of questions...

1. If I don't have a route for index.html, it cribs. Any obvious reasons?

2. I have the following routes

   const routes: Routes = [

   {path: '', pathMatch: 'full', redirectTo: 'index.html',},

   {path: 'index.html', component: AppComponent},

   {path: 'register', component: UCSDomainRegister}

   ];

AppComponent is my bootstrap component and index.html is my targetviewID in plugin.xml as the target for my icon which goes as a vise.global.views extension.

I have two issues at present.

a. Runtime error - ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'

b. My router link to register route is not working. I have the following button in my HTML template for the AppComponent.

  <input type="button" class="btn btn-primary" value="Register" routerLink="register" />

Also given is the base href settings as below.

 <script>

         (function(){

            var href = document.location.href;

            href = href.substring(0, href.indexOf("index.html"));

            document.write('<base href="' + href + '" />');

         })();

      </script>

Please let me know if there is a guidelines document which I can follow while developing a H5 plugin based on angular2. Basically how to manipulate the plugin.xml and various routes for the plugin.

Thanks much in anticipation.

Manoj

const routes: Routes = [
   {path: '', pathMatch: 'full', redirectTo: 'index.html',},
   {path: 'index.html', component: AppComponent},
   {path: 'register', component: UCSDomainRegister}
];
Reply
0 Kudos
6 Replies
laurentsd
VMware Employee
VMware Employee

Please send me your email address in a private message and I will share with you a preview of a new tool for building HTML plugins with Angular 2 / Typescript and Clarity

Reply
0 Kudos
usernamealrea11
Contributor
Contributor

laurentsd​​ I have the same question. Is there any documentation about enabling single page routing through plugin.xml ? Right now we only have a `<url>` attribute that redirects to a view via index.html.

Reply
0 Kudos
_vladi_
VMware Employee
VMware Employee

Hi,

The plugin manifest does not provide extensibility for this kind of routing (or deep linking) out of the box. That said, you can specify parameters in the <url> that you could later handle and switch to a sub-view.

Cheers,

Vladi

Reply
0 Kudos
usernamealrea11
Contributor
Contributor

Thanks Vladi, I'm doing that already. The unfortunate side effect is the content pane reloads from scratch.

But I noticed you mentioned "out of the box". Does that mean I can integrate some form of routing (not page reloading) by customization? Hopefully there exists an example too Smiley Happy

Reply
0 Kudos
_vladi_
VMware Employee
VMware Employee

Isolation of plugin views require them to be in iframes so the content will always load from scratch.

Out of the box is what you can't do at the moment. Smiley Happy

Nevertheless:

  • within the plugin.xml you can use URL params
  • when navigating from one plugin view to another you can call the app.navigateTo JS API with custom data

In both cases the vSphere Client platform can only navigate you to the iframe and any further customizations of routing to sub-pages are entirely on the plugin side.

Cheers,

Vladi

Reply
0 Kudos
_vladi_
VMware Employee
VMware Employee

Btw, the last points are demonstrated in the html-sample in the latest vSphere Client SDK 6.7U3.

Reply
0 Kudos