Without adding too much code or documentation to my question, I had a problem with the [routerLink] code for our Angular 2 Demo:
Versioning
Node.js - v4.4.7
@angular - 2.0.0-rc.1
application /app.component.ts
@RouteConfig([
{
path: '',
name: 'TasksComponent',
component: TasksComponent
},
{
path: 'tasks/editor',
name: 'TaskEditorComponent',
component: TaskEditorComponent
},
{
path: 'timer',
name: 'TimerComponent',
component: TimerComponent
}
])
application /app.component.html
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<strong class="navbar-brand">My Pomodoro App</strong>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a [routerLink]="['TasksComponent']">Tasks</a></li>
<li><a [routerLink]="['TimerComponent']">Timer</a></li>
<li><a [routerLink]="['TaskEditorComponent']">Publish Task</a></li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>
Highlighted HTML (in browser)
<body>
<script id="__bs_script__">
//<![CDATA[
document.write("<script async src='/browser-sync/browser-sync-client.2.14.0.js'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
<script async="" src="/browser-sync/browser-sync-client.2.14.0.js"></script>
<pomodoro-app>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<strong class="navbar-brand">My Pomodoro App</strong>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a></a></li></ul>
</div>
</nav>
</pomodoro-app>
</body>
If I remove the anchor tags [routerLink] = "['TasksComponent'] , the anchor tags appear without problems. Somehow the [routerLink] rendering causes the problem It seems that the problem is not in my import commands , nor in any other w50 related > 2 information, so I reduced the volume of my code to versions, the typescript file and the html file in question.
Lite Server. .