AngularJS migration to Angular – how to migrate internal states

Issue

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?

Solution

Found the solution myself. The following can be done:

create an angular js directive:

import * as angular from 'angular';

class RouterOutletWrapper {}


let routerOutletWrapper = {
    controller: RouterOutletWrapper,
    template: `<ui-view></ui-view>`
};

angular
.module('app')
.component('routerOutletWrapper', routerOutletWrapper);

and a matching Angular directive:

@Directive({
    selector: 'router-outlet-wrapper'
})
export class UpgradedAjsRouterOutletWrapper extends UpgradeComponent {
    constructor(elementRef: ElementRef, injector: Injector) {
        super('routerOutletWrapper', elementRef, injector);
    }
}

Then in then login component html write:

...
<router-outlet-wrapper></router-outlet-wrapper>
...

Answered By – Noy Oliel

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0