AngularJS migration to Angular - how to migrate internal states

I have an AngularJS login component that I need to migrate. I have to use AngularJS router, as not all the application haa been migrated.

The login component contains a ui-view directive in the template. e.g:

<div>
...
</div>
<div>
..
    <div ui-view></div>    
..
</div>
....

States are similar to below (there are a few more):

  .state('loginroot', {
      abstract: true,
      url: "",
      template: '<login-root></login-root>',
      data: {
          allRole: true
     }
 })

  .state('loginroot.forgot', {
      url: "/forgot",
      template: `<forgot-password></forgot-password>`,

      data: {
          pageTitle: 'Forgot my password',

      }
  })

How can I convert this component without needing to finish the entire migration?