The solutions for this problem is in the child level menus, no need to
prefix the /. but only for the default route in the child menus, "./" need
to be added to make it work.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#ExtractorQueue"
[routerLink]="['./']">ExtractorQueue</a></li>
<li><a data-toggle="tab" href="#Extractor"
[routerLink]="['Extractor']">Extractor</a></li>
<li><a data-toggle="tab" href="#Schedule"
[routerLink]="['Schedule']">Schedule</a></li>
<li><a data-toggle="tab" href="#CacheVisualization"
[routerLink]="['CacheVisualization']">Cache Visualization</a></li>
</ul>
On Thursday, July 14, 2016 at 7:00:32 PM UTC-4, Navaneetha Krishnan S wrote:
>
> My Menu provider is as below
>
> export const routes: RouterConfig = [
> { path: '', component: Dashboard1 },
> { path: 'Dashboard2', component: Dashboard2 },
> { path: 'Report1', component: Report1 },
> { path: 'Report2', component: Report1 },
> {
> path: 'ManageRedisCache', //Child level menus
> component: ManageRedisCache,
> children: [
> { path: '', component: ExtractorQueue },
> { path: 'Extractor', component: Extractor },
> { path: 'Schedule', component: Schedule },
> { path: 'CacheVisualization', component: CacheVisualization}
> ]
> }
> ];
>
> First level menu html template as the following html link which loads the
> second level menus
>
> <ul>
> <li class="teamMate">
> <a [routerLink]="['/ManageRedisCache']"><h4>Manage
> Redis Cache</h4></a>
> </li>
> </ul>
>
> ManageRedisCache component has the html template as below where second
> level routes are specified
>
> <div class="container">
> <h2>Redis Administration</h2>
> <ul class="nav nav-tabs">
> <li class="active"><a data-toggle="tab"
> [routerLink]="['/']">ExtractorQueue</a></li>
> <li><a data-toggle="tab"
> [routerLink]="['/Extractor']">Extractor</a></li>
> <li><a data-toggle="tab"
> [routerLink]="['/Schedule']">Schedule</a></li>
> <li><a data-toggle="tab" [routerLink]="['/CacheVisualization']">Cache
> Visualization</a></li>
> </ul>
> <div class="tab-content">
> <router-outlet></router-outlet>
> </div></div>
>
> I have defined the child route as above and the child level default route
> i.e. ExtractorQueue works fine on load/click of "ManageRedisCache" link. On
> the first load it loads the component "ExtractorQueue" but on navigating to
> other child routes like "Extractor,Schedule,CacheVisualization" it doesnot
> works fine. None of the other routing links like
> "Extractor,Schedule,CacheVisualization" seems to work or even clickable. I
> am getting the following error in the browser console
>
> zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'Extractor'
> ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes:
> 'Extractor'
> at Observable.eval [as _subscribe]
> (http://localhost:49928/lib/@angular/router/src/apply_redirects.js:37:34)
> at Observable.subscribe
> (http://localhost:49928/lib/rxjs/Observable.js:52:62)
> at Observable._subscribe
> (http://localhost:49928/lib/rxjs/Observable.js:109:28)
> at MergeMapOperator.call
> (http://localhost:49928/lib/rxjs/operator/mergeMap.js:75:23)
> at Observable.subscribe
> (http://localhost:49928/lib/rxjs/Observable.js:52:38)
> at Observable._subscribe
> (http://localhost:49928/lib/rxjs/Observable.js:109:28)
> at MergeMapOperator.call
> (http://localhost:49928/lib/rxjs/operator/mergeMap.js:75:23)
> at Observable.subscribe
> (http://localhost:49928/lib/rxjs/Observable.js:52:38)
> at Observable._subscribe
> (http://localhost:49928/lib/rxjs/Observable.js:109:28)
> at MapOperator.call
> (http://localhost:49928/lib/rxjs/operator/map.js:54:23)consoleError @
> zone.js:461
> zone.js:463 Error: Uncaught (in promise): Error: Cannot match any routes:
> 'Extractor'
> at resolvePromise (http://localhost:49928/lib/zone.js/dist/zone.js:538:32)
> at http://localhost:49928/lib/zone.js/dist/zone.js:515:14
> at ZoneDelegate.invoke
> (http://localhost:49928/lib/zone.js/dist/zone.js:323:29)
> at Object.onInvoke
> (http://localhost:49928/lib/@angular/core/bundles/core.umd.js:9100:45)
> at ZoneDelegate.invoke
> (http://localhost:49928/lib/zone.js/dist/zone.js:322:35)
> at Zone.run (http://localhost:49928/lib/zone.js/dist/zone.js:216:44)
> at http://localhost:49928/lib/zone.js/dist/zone.js:571:58
> at ZoneDelegate.invokeTask
> (http://localhost:49928/lib/zone.js/dist/zone.js:356:38)
> at Object.onInvokeTask
> (http://localhost:49928/lib/@angular/core/bundles/core.umd.js:9091:45)
> at ZoneDelegate.invokeTask
> (http://localhost:49928/lib/zone.js/dist/zone.js:355:43)
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
