Angular2 Nested Routing parent to child ES5 not working - angularjs

Question

Current working on angular2 beta version 6, in this nested routing like parent to child using (EX: /plan/...) future is not working on es5 JavaScript development, but in type script development it's working perfectly
Throwing error: EXCEPTION: Link "["Plan"]" does not resolve to a terminal instruction.
App.js code
var Tabs = [],viewId;
app.AppComponent =
ng.core.Component({
selector: 'app',
template: '<router-outlet></router-outlet>',
directives: [ng.router.ROUTER_DIRECTIVES],
providers: [ng.http.HTTP_PROVIDERS]
})
.Class({
constructor: [ng.router.Router, function(router) {
console.log("1");
router.config([
{ path: '/', redirectTo: ['Home'] },
{ path: '/home', component: app.HomeComponent, name: 'Home' },
{ path: '/plan/...', component: app.planComponent, name: 'Plan' }
]);
}]
});
document.addEventListener('DOMContentLoaded', function() {
ng.platform.browser.bootstrap( app.AppComponent,[ng.router.ROUTER_PROVIDERS]);
});
Plan.js code
app.planComponent =
ng.core.Component({
selector: 'plan-view',
templateUrl: './assets/src/plan/view/plan.html',
directives: [ ng.router.RouterLink, ng.router.ROUTER_DIRECTIVES],
})
.Class({
constructor:[ng.router.Router, function(router){
console.log("2");
router.config([
{ path: '/', redirectTo: ['PlanInfo'] },
{ path: '/planInfo', component: app.planInfoComponent, name: 'PlanInfo', useAsDefault: true }/*,
{ path: '/coverage', component: app.CoverageComponent, name: 'Coverage' },
{ path: '/nonelective', component: app.nonElectiveComponent, name: 'NonElective' },
{ path: '/loans', component: app.loansComponent, name: 'Loans' },
{ path: '/enrollment', component: app.enrollmentComponent, name: 'Enrollment' }*/
]);
}]
});

Answer 1

I think that you should use the ng.router.RouteConfig decorator instead of the router itself. Like this, you will have the same configuration as with TypeScript.
Here is the way to do:
ng.router
.RouteConfig([
{ path: '/', redirectTo: ['Home'] },
{ path: '/home', component: app.HomeComponent, name: 'Home' },
{ path: '/plan/...', component: app.planComponent, name: 'Plan' }
])(app.AppComponent);
(...)
ng.router
.RouteConfig([
{ path: '/', redirectTo: ['PlanInfo'] },
{ path: '/planInfo', component: app.planInfoComponent, name: 'PlanInfo', useAsDefault: true }/*,
{ path: '/coverage', component: app.CoverageComponent, name: 'Coverage' },
{ path: '/nonelective', component: app.nonElectiveComponent, name: 'NonElective' },
{ path: '/loans', component: app.loansComponent, name: 'Loans' },
{ path: '/enrollment', component: app.enrollmentComponent, name: 'Enrollment' }*/
])(app.planComponent);
As a reference, you could have a look at this plunkr: https://plnkr.co/edit/w61Ecbmuj7EfDnsYEHOS?p=info.