ngUpgrade - routing from ng2 to ng1 - how? - angularjs

Question

I am using ngUpgrade and I dont know how to handle the routing between ng2 and ng1. If I am in ng2 component, how do I route to ng1 controller? and viceversa.
I am using ui-router for the ng1. For ng2 I am using the router on the angular team.
Thanks all!

Answer 1

First you need to have defined your routes as normal in both Angular 1.x and 2.x apps.
app.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
And in the Angular 2 Module:
Module.config(($routeProvider) => {
$routeProvider
.when('/user/:id', {template : '<user-details></userdetails>'})
.when('/users', {template : '<user-list></userlist>'});
});
You can create a class called Ng1Ng2UrlHandlingStrategy and in there devide your routes between them:
class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
shouldProcessUrl(url) { return url.toString().startsWith("/home") || url.toString().startsWith("/aboute") || url.toString().startsWith("/contact"); }
extract(url) { return url; }
merge(url, whole) { return url; }
}
And in your main component:
providers: [
// Providing a custom url handling strategy to tell the Angular 2 router
// which routes it is responsible for.
{ provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
]
Finally, update the root component to include an Angular 2 router outlet.
#Component({
selector: 'root-cmp',
template: `
<router-outlet></router-outlet>
<div class="ng-view"></div>
`,
})
export class RootCmp {}