Kylo UI - Create new typescript module

Question

I have a doubt about the way to work with Kylo and UI structure.

According to the site http://kylo.readthedocs.io/en/v0.8.3/developer-guides/KyloDeveloperGuide.html?highlight=angular2 it says:

Most of the Kylo UI depends on AngularJS and AngularJS Material but a few parts have been upgraded to Angular 2 and Covalent. New plugins should be written in Typescript and use Angular 2 for future compatibility.

It says that new plugins should be written in angular2 and typescript, but all the examples and the core components are written in AngularJS.

One example is this one: https://github.com/Teradata/kylo/tree/master/samples/plugins/example-module/example-module-ui

I would like to know the Typescript and Angular2 alternative for that module, including routing, is there any live example ?

Answer 1

I've tested that Angular 2 does work if the code is added directly to the kylo-ui-app project but I don't think Kylo's plugin system supports Angular 2 right now.

The only difference from standard Angular 2 is that Kylo uses UI-Router instead of the Angular Router, but the syntax is very similar. From memory I think these are the steps I used:

1) Add a new route to routes.js:

{
  name: 'contacts.**',
  url: '/contacts',
  loadChildren: './contacts/contacts.module#ContactsModule'
}

2) Add the child states to your module:

@NgModule({
  imports: [ UIRouterModule.forChild({ states: CONTACTS_STATES }), /* ... and any other modules */ ],
  declarations: [ ContactComponent, /* ... and any other components */ ],
  providers: [ ContactsDataService ],
})
export class ContactsModule { }

3) The component for each state should be specified under views.content:

{
  name: 'contacts',
  url: '/contacts',
  views: {
    "content": {
      component: ContactsComponent,
    }
  }
}