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