CODEWITHSUNDEEP
angularjsroutescomponentsangular
venkat
venkat

Reputation: 13

Angular2 Nested Routing parent to child ES5 not working

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'  }*/
            ]);
        }]
    });

Upvotes: 1

Views: 177

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202256

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.

Upvotes: 0

Related Questions