How to create a Typescript and Angular2 module

[German Bortoli]

Hello, I already asked this question on stackoverflow https://stackoverflow.com/questions/46653445/kylo-ui-create-new-typescript-module but basically what I am trying to do is mentioned below:

 - In the documentation it says that we should write modules using Typescript and Angular2, but what I was reading so far, all the examples and code are written using AngularJS, like the module loading, routing, etc.

Is there any example using Angular2 and Typescript ?

[Gregory Hart]

Hi German,

We're still working on providing an upgrade path to Angular 2 so there are no examples of it yet. 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.

Are you able to use AngularJS or do you require Angular 2?

[German Bortoli]

Yes, I could work inside kylo-ui-app and yes, I really need angular2, specially the module structure like the routings, module, component, etc ... Is there any possibility to add an angular2 module without mixing a lot with AngularJS ?

[Gregory Hart]

Hi German,

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,
    }
  }

}

[German Bortoli]

And what about the files, module-name.js, module.js and module-require, are those needed for angular2 ?

[Gregory Hart]

Hi German,

No, the module-name.js, module.js, and module-require.js files are only needed for AngularJS modules.

[German Bortoli]

Thanks a lot, it worked !!, I've created a sample module into github as documentation https://github.com/Germanaz0/kylo-sample-module