I'm fairly new to Angular2 and am trying to get to grips with routing, and in particular child routing.
I have based my application off the Angular2-seed project and am trying to setup the routing. My routes are encapsulated within functional modules as I expect to have many functional areas to my application. For brevity I have omitted the module imports, it can be assumed that they are correct as the app loads.
app.component.ts
RouteConfig([
{ path: '/', component: HomeComponent, as: 'Home' },
{ path: '/area1/...', component: Area1Component, as: 'Area1' },
{ path: '/area2/...', component: Area2Component, as: 'Area2' },
])
area1.component.ts
@RouteConfig([
{ path: '/...', component: Area1Component, as: 'Area1' },
{ path: '/function1', component: Function1Component, as: 'Function1' },
])
area2.component.ts
@RouteConfig([
{ path: '/...', component: Area2Component, as: 'Area2' },
{ path: '/function2', component: Function2Component, as: 'Function2' },
])
my navigation is defined as follows
<nav>
<a [routerLink]="['Home']">HOME</a>
<a [routerLink]="['Area1', 'Function1']">A NICE FUNCTION</a>
<a [routerLink]="['Area2', 'Function2']">ANOTHER NICE FUNCTION</a>
</nav>
If I run the application normally and navigate the menu structures all is fine, however if I refresh the page or allow browser sync to do the same when I am within any of the child routes the tab hosting the application spins up to 100% cpu usage. I have not been able to work out where the code is spinning and would appreciate any pointers that I may have missed in setting up the routing.
Günter Zöchbauer :
\nas is deprecated, use name instead. \n/... at the end of the route path indicates to the router that there are more child routes. Without /... they are terminal routes. From the code in your question it looks like there are no further child routes therefore these routes are rendundant.\n",
2016-04-01T16:07:30